第六章 Canvas与javaScript特效笔记
q <canvas>标签的用途
HTML5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。
为了能在 JavaScript 中引用元素，最好给元素设置 id；也需要给 canvas 设定高度和宽度。创建好了画布后，要准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById( ) 函数找到 canvas元素，然后使用getContext( )初始化上下文。此后可以使用上下文 API 绘制各种图形。目前仅有极少浏览器支持3D绘图。
|
<body onload="drawCanvas()"> <canvas id="cvs" width="800" height="600"> </canvas> </body> |
|
function drawCanvas() { var canvas=document .getElementById("cvs"); var context=canvas .getContext("2d"); } |
q 画笔颜色和粗细
Ø fillStyle 填充颜色
注：color 可以是 CSS 颜色中的任何一种。
Ø strokeStyle 绘制线条颜色。colorvalue 同上
Ø lineWidth 线条的粗细。必须是正值。默认值是 1.0
q 矩形
Ø fillRect(x, y, width, height) 画一个矩形
Ø strockRect(x, y, width, height) 画一个矩形外框
Ø clearRect(x, y, width, height) 类似于打孔效果，把某个层清除，将其成变透明区
Ø rect(x, y, width, height) x,y 新矩形的 top 和 left 值。当这个方法被调用，默认调用 moveTo(0,0)
q 绘制路径
Ø beginPath() 告诉浏览器，你要开始绘制。当 beginPath() 被调用，是另一个过程的开始。
Ø closePath() 结束一个绘制过程。相当于 html 中的结束标签。
Ø stroke() 绘制形状外框 fill() 绘制实心形状。一旦 fill() 被调用，形状的绘制将被结束，不再需要 closePath()
Ø moveTo(x, y) 描述虚拟的“画笔”放到要开始绘制的点
Ø lineTo(x, y) 绘制线条，x, y 表示线条的结束点坐标。
Ø arc(x, y, radius,startAngle,endAngle, anticlockwise) 绘制弧形、圆形。x, y 是圆的中心坐标,radius 半径,startAngle,endAngle,圆形弧度的开始点和结束点，以X轴为准,anticlockwise，逆时针旋转，boolean。
注：Angle 是靠弧度来计算的，而不是以旋转的度数来计算。
q 绘制图片
Ø drawImage(image, x, y [, width, height])
Ø 注意：
1. Imgage表示图片，或者我们的 canvas 对象。如 var img = new Image();
2. x, y 在 canvas 中放置图片的坐标，相当于 CSS 的 top, left;
3. width, height，生成图片的宽高
q 绘制圣诞树
Ø 思路：
Ø 获取context对象
Ø 调整画笔颜色和粗细
Ø 计算好圣诞树各点坐标
Ø 依次调用beginPath()、moveTo(x,y)、lineTo(x,y)、closePath()、 stroke() 方法