Canvas 2D绘图.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（必须已经加载完毕），也可以是另一个画布canvassx, sy, sw, sh: 原始图像中要绘制的矩形区域x, y, 宽度, 高度dx, dy, dw, dh: 画到画布上的矩形区域 x, y, 宽度, 高度Canvas 2D绘图准备工作绘制基本图形绘制文字绘制图像高级应用裁剪图像叠加坐标变换像素计算动画高级应用——裁剪裁剪的步骤：beginPath() 开始路径绘制通过arc, rect或者lineTo线段组合绘制要裁剪的路径区域closePath() 闭合路径clip() 设置裁剪如何还原？在裁剪前使用save()，保存画布设置进行裁剪、绘图操作使用restore()，还原画布设置Canvas 2D绘图准备工作绘制基本图形绘制文