Canvas
2018-01-16 10:26:38 0 举报AI智能生成
HTML5 Canvas 绘图要点
作者其他创作
大纲/内容
常用属性：id, width, height
标签内容：当浏览器不支持 canvas 标签时会显示
使用标签对象的 getContext 方法获得绘图环境
平面绘图环境对象 ctx = canvasObj.getContext("2d")
绘制方法
填充：fill
轮廓：stroke
风格定义（颜色及纹理）：fillStyle / strokeStyle
绘制矩形
绘制并填充：fillRect(x, y, width, height)
绘制轮廓：strokeRect(x, y, width, height)
清除指定的矩形区域：clearRect(x, y, width, height)
参数：x, y - 矩形左上角坐标；width, height - 矩形的宽和高
绘制复杂图形
开始记录路径：beginPath()
闭合路径（记录从当前绘制点绘一直线到起点的路径）：closePath() - 非必须
fill(), stroke() - 填充图形或绘制图形轮廓（填充绘自动闭合路径）
lineTo(x, y) - 记录从当前点绘制一直线到 x, y 的路径
arc(x, y, 半径, 起始角度, 结束角度, 逆时针) - 从 x, y 点按指定参数记录绘制弧线的路径
moveTo(x, y) - 移动到 x, y 但移动过程不会记录路径
绘制方法
1. 用 beginPath() 表明开始记录绘制路径
2. 从当前点开始记录线条路径或用 moveTo(x, y) 移动到绘图起始点
3. 用 lineTo(x, y) 或 arc(x, y, ...) 记录线条路径
4. 重复以上步骤直到路径记录完毕
5. 用 closePath() 使线条最后闭合（可选）
6. 用 fill() 或 stroke() <b>填充</b>图形（若为闭合绘自动闭合）或<b>绘制</b>图形线条
绘制文本
fillText(文本, x, y) - 从x, y 点开始填充文字（实心文字）
strokeText(文本, x, y) - 从 x, y 点开始描绘文字（空心文字）
字体定义：ctx.font = "16pt Arial"
绘制图像
drawImage(图像对象，x, y) - 在 x, y 点开始绘制图像，图像大小为自身实际大小
drawImage(图像对象，x, y, 宽, 高) - x, y 点开始绘制图像，图像大小缩放到指定宽和高
drawImage(图像对象, 原图上的x, 原图上的y, 原图上的宽, 原图上的高, 画布上的x, 画布上的y, 画布上的宽, 画布上的高) - 从原图截取部分图像到画布的 x,y 上,并用指定的宽和高显示，
变形及旋转
translate(x,y) - 移动画布使其原点移动到 x, y 点
rotate(angle) - 将画布顺时针旋转 angle 指定的角度（弧度）
scale(mx, my) - 将绘制的对象在 x 和 y 轴上缩放 mx 和 my 倍
操作方法
1. 用 ctx.save() 保存当前环境
2. 用 translate(x, y) 将画布原点移动到绘制对象的起始点
3. 用 rotate(angle) 旋转画布
4. 绘制（及缩放）绘制对象
5. 用 ctx.restore() 恢复原先环境
绘制动画技巧
在一定的时间间隔内，交替使用绘制目标和清除目标，每一次绘制的目标位置不同，就会产生动画效果
如果清除目标时可能清除到其他对象，应当将这些对象放到另外的画布（合理重叠）里
画布上显示复杂文本内容、交互式（鼠标响应等）内容的技巧
用非 canvas 标签布局内容，如：div, section 等
用绝对定位方法定位到画布的合适位置
根据需要对内容进行隐藏或显示
0 条评论
下一页
