chap07 图形绘制-网页设计与Web前端开发案例教程-莫小梅-清华大学出版社
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<script>
var c1=document.getElementById("c1")
var context=c1.getContext("2d")
来自百度文库
context.beginPath() //绘制圆脸路径并填充
context.fillStyle="#ff9900“
context.arc(100,100,70,0,Math.PI*2)
var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); context.strokeStyle="#FF0000"; context.rect(20,20,100,50); context.stroke();
图，甚至还可以加入高级动画。
7.2 Canvas的坐标系统
Canvas画布作为图形容器，在页面中表现为一个矩形区域， 其2d环境的坐标系统延续web页面的坐标系统。 Canvas画布默认坐标原点（0，0）在画布左上角，向右为x轴 正向，向下为y轴正向。 Canvas中除了坐标系统外，还经常使用到角度度量。 Canvas中默认x轴正向为0度，顺时针的角度为正值，逆时针 的角度为负值。
context.beginPath()
//绘制眉毛并描边
context.strokeStyle="black“
context.lineWidth=5
7.3 添加Canvas元素
使用Canvas的第一步是在Web页面中添加一个Canvas。添加 Canvas很简单，只需要在<body>标签内添加一个<canvas>标 签就可以了，代码如下：
< canvas id="myCanvas" width="300" height="300"> 您的浏览器不支持Canvas。
或者通过JavaScript对Canvas对象的width和height属性进 行赋值。
Canvas的宽度和宽度由CSS设置，实际上是对Canvas的默 认大小进行拉伸压缩，会造成绘制的图形比例失调。
Canvas的其他样式都可以交由CSS进行设置。
7.4 Canvas绘制环境
每个Canvas元素都包含一个HTML5内建的context对象，通常 称为绘制环境或者上下文，通过它可以访问绘图API。 要获取Canvas中的上下文，只需要通过Canvas对象调用 getContext()方法即可，语法为：
canvas.getContext(绘制的类型)
其中绘制类型取值有三种：
“2d”为二维环境 “experimental-webgl”为试验版三维环境 “webgl”为三维环境
本章中我们使用的绘制类型是“2d”。
使用Canvas绘制图形的过程，首先要获取其绘制环境context ，然后在绘制环境中执行动作，最后将这些动作应用到绘制 环境中。 绘制过程的代码如下所示：
</ canvas >
对Canvas元素的所有操作都要通过脚本代码实现，为了便于 在JavaScript中更好的操作Canvas，通常给Canvas标签添加id 属性，通过id可以快速准确找到Canvas。
Canvas是一个矩形的区域，其默认高度宽度为300×150 像素。
设置Canvas的高度宽度要在HTML标签中设置高度与宽度 属性，如上面的代码中所示。
7.1 初识Canvas
6.1.1 JavaScript简介 Canvas即画布，是HTML5加入的元素，用于像素图形的绘制
。 Canvas出现之前，页面中的图形绘制需要使用插件实现，如
Flash和SVG，或者通过复杂的JavaScript代码来实现。 在Canvas中可以添加图片、线条以及文字，也可以在里面绘
网页设计与Web前端开发案例教程
——HTML5、CSS3、JavaScript
第7章 图形绘制
学习目标： 了解Canvas的概念 熟悉Canvas绘图相关知识 掌握Canvas的使用方法 掌握Canvas绘图API的使用 掌握Canvas动画的实现方法 通过相关的范例及综合案例实践，了解并掌握Canvas绘图技术及其在 动画设计中的应用。
【例7-1】下面是一个简单的路径绘制表情图的例子，其完整形代码及绘制图形如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#c1{
border:solid 1px ;
} </style>
</head>
<body>
<canvas id="c1" width="200" height="200"></canvas>
7.5.1 绘制路径
路径是一系列点以及点之间的连线，使用路径可以在Canvas上绘制各种 不同的形状。 路径不属于绘制环境中的状态，但Canvas环境中只有一个当前路径。 当绘制过程中需要绘制不同的路径时，需要调用路径开始方法 beginPath()开始一个新的路径。而closePath()结束路径并将该路径闭合 。 Canvas中有各种不同的方法可以绘制矩形、圆弧、直线、曲线等不同的 路径，表7-2中列出了绘制路径的一些常用属性和方法。
以上代码通过id获得Canvas对象，并获得2d环境，设置笔触颜色 为红色，从（20，20）位置开始填充一个长100，高50的矩 形边框。
7.5绘图API
Canvas画布是一个图形容器，是图形的载体，其本身并不具备绘制能力 ，必须通过绘图API实现图形绘制。 Canvas API就是用来在Canvas中进行图形图像设置、绘制以及变换的一 系列属性和方法。 Canvas绘图API的功能非常强大，可以完成各类应用程序，这里我们只介 绍一些基础的知识和应用，不会详细介绍每一个属性和方法。
context.fill() //绘制眼睛并填充
context.beginPath()
context.fillStyle="#000000"
context.arc(70,100,10,0,Math.PI*2)
context.arc(130,100,10,0,Math.PI*2)
context.fill()