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 =