Canvas2D绘图.pptx

Canvas 2D绘图 Canvas 2D绘图 准备工作 绘制基本图形 绘制文字 绘制图像 高级应用 裁剪 图像叠加 坐标变换 像素计算 动画 Canvas 2D绘图 准备工作 绘制基本图形 绘制文字 绘制图像 高级应用 裁剪 图像叠加 坐标变换 像素计算 动画 准备工作 创建Canvas对象可以使用 var canvas = document.createElement(‘canvas’); 或者使用页面上已经存在的Canvas对象 var canvas = document.getElementById(‘canvas的id’); 设置Canvas的物理尺寸，可以通过 canvas.width = 400; canvas.height = 300; 或者HTML元素的设置方式 canvas.setAttribute(‘width’, 400); canvas.setAttribute(‘height’, 300); 最后，获取到Canvas的绘图接口 var context = canvas.getContext(‘2d’) Canvas 2D绘图 准备工作 绘制基本图形 绘制文字 绘制图像 高级应用 裁剪 图像叠加 坐标变换 像素计算 动画 绘制基本图形——基本绘图设置 设置项 说明 示例 context.lineWidth 线条宽度 context.lineWidth = 2; context.fillStyle 填充颜色 context.fillStyle = ‘#000000’; context.strokeStyle 边框颜色 context.strokeStyle = ‘#ff0000’; context.globalAlpha 绘图透明度 context.alpha = 0.7 绘制基本图形——绘制矩形 函数 说明 示例 fillRect(x, y, width, height) 绘制并填充矩形 context.fillRect(0, 50, 100, 200); strokeRect(x, y, width, height) 绘制矩形并画出边框 context.strokeRect(0, 50, 100, 200); 绘制基本图形——绘制路径 函数 说明 beginPath() 开始路径绘制 closePath() 结束路径绘制 arc(x, y, radius, starAngle,endAngle, anticlockwise) 绘制圆弧 rect(x, y, width, height) 绘制矩形 moveTo(x, y) 移动画笔 lineTo(x, y) 绘制线段到这个点 stroke() 绘制路径的边框 fill() 填充路径内部区域 绘制基本图形——绘制圆弧 Canvas 2D绘图 准备工作 绘制基本图形 绘制文字 绘制图像 高级应用 裁剪 图像叠加 坐标变换 像素计算 动画 绘制文字 属性/函数 说明 示例 font 设置字体 context.font = ‘20px Arial bold’; textAlign 水平对齐 context.textAlign = ‘center’; textBaseline 垂直对齐 context.textBaseline = ‘middle’; strokeText(string, x, y) 绘制文字边框 context.strokeText(‘abc’, 100, 200); fillText(string, x, y) 绘制文字 context.fillText(‘abc’, 100, 200); measureText(string) 计算文字宽度 context.measure(‘abcdefg’); Canvas 2D绘图 准备工作 绘制基本图形 绘制文字 绘制图像 高级应用 裁剪 图像叠加 坐标变换 像素计算 动画 绘制图像 方法 说明 drawImage(image, x, y) 在指定坐标绘制图像 drawImage(image, x, y, width, height) 在指定的坐标以指定的大小绘制图像 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 在指定的坐标以指定的大小绘制图像的一部分 image: 要绘制的图像——图像元素img（必须已经加载完毕），也可以是另一个画布canvas sx, sy, sw, sh: 原始图像中要绘制的矩形区域x, y, 宽度, 高度 dx, dy, dw, dh: 画到画布上的矩形区域 x, y, 宽度, 高度 Canvas 2D绘图 准备工作 绘制基本图形 绘制文字 绘制图像 高级应用 裁剪 图像叠加 坐标变换 像素计算 动画 高级应用——裁剪