canvas基础知识点简介.docVIP

canvas 1 基础概念 2 2 创建canvas 2 3 方法属性 2 4 画一条直线 3 4.1 线条的属性 3 5 画矩形 3 6 画五角星 4 7 图形变换 5 8 状态保存和恢复 6 9 填充样式 6 9.1 线性渐变 6 9.2 径向渐变 6 9.3 使用图片填充 7 9.4 使用画布canvas进行填充 7 10 线条样式 8 11 曲线的绘制 8 11.1 arc() 8 11.2 arcTo() 9 11.3 画月亮 10 11.3.1 三角函数 10 11.3.2 封装画月亮函数 11 11.4 贝塞尔曲线 Bezier 12 11.4.1 二次贝塞尔曲线 12 11.4.2 三次贝塞尔曲线 13 12 文字渲染基础 13 12.1 font属性 13 12.2 textAlign水平对齐 16 12.3 textBaseline垂直对齐 16 12.4 messureText(string).width文本的度量 16 13 阴影 16 14 global全局 17 14.1 globalAlpha 17 14.2 globalCompositeOperation 18 15 剪辑区域clip() 18 基础概念 1. canvas标签 HTML5canvas元素用于图形的绘制，通过脚本来完成 canvas标签只是图形容器，您必须使用脚本来绘制图形 你可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像 只有标准浏览器支持（IE9以上，谷歌，火狐） canvas不是基于对象的绘制，而是基于状态的绘制 创建canvas html： canvas id=’canvas’/canvas JavaScript： var canvas=document.getElementById(‘vanvas’); canvas.width=500; cnavas.height=500; var context=canvas.getContext(‘2d’); 方法属性 canvas.width=500; //画布的宽度 canvas.height=500; //画布的高度 canvas.getContext(‘2d’); //创建绘图的上下文环境 context.lineWidth=5; //线条粗细 context.moveTo(100,100); //起始坐标 context.lineTo(200,200); //划到给定的坐标 context.fillStyle=’yellow’ //定义填充颜色 context.fill(); //开始填充，默认填充黑色 context.strokeStyle=’red’; //定义线条颜色 context.stroke(); //开始绘制，默认绘制灰色(128,128,128) context.beginPath(); //创建新的状态 context.closePath(); // 画一条直线 context.moveTo(100,100) 状态设置 context.lineTo(100,100); context.stroke(); 绘制 线条的属性 lineWidth：线条粗细 lineCap：设置线条端点 butt：平头端点(默认) round：圆头端点 square：方头端点 context.lineCap=”square”; //也可以实现图像封闭无缺口（效果等同closePath()） lineJoin:设置线条连接样式 miter：斜接连接（默认） round：圆角连接 bevel：斜角连接 miterLimit：默认值为10 当lineJoin为miter时才有效，如果线条相接所产生的内角与外角的距离超过10，将以bevel的方式相连接 画矩形 context.rect(x,y,width,height); //定义矩形 context.fillRect(x,y,width,height); //定义并且绘制图形(填充，不能描边) context.strokeRect(x,y,width,height); //定义并且绘制图形(描边，不能填充) 代码： context.rect(100,100,300,300); context.lineWidth=10; context.strokeStyle=red; context.fillStyle=green; context.stroke(); context.fill(); 画五角星 正弦：对边除以斜边 余弦：邻边除以斜边 正切：对边除以邻边 在编程里面，用的是弧度制： 20度表示为： 20/180*Math.PI //角度转