Canvas基础 / 开普饭

1、canvas简介（1）canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。（2）canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏。（3）支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。2、canvas实战（1）查看当前浏览器是否支持canvas可以在canvas标签内书写提示内容，若当前浏览器不支持canvas，则显示提示内容。<canvas id="myCanvas" height="900" width="900">您的浏览器过低，请更换高版本再试</canvas>（2）修改画布canvas画布是一个矩形区域，里面的每一个像素都可以被控制。应在canvas标签内设置width和height属性，不要在css里设置，避免以后canvas画出的图像变形。（3）获取绘制环境var myCanvas=document.getElementById('myCanvas');//获取画布id var ctx=myCanvas.getContext('2d');getContext()方法返回一个用于在画布上绘图的环境。此处语法：myCanvas.getContext('2d')，参数2d指定了你想要在画布上绘制的类型，当前唯一的合法值为"2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。3、方法：方法说明beginPath()开始定义路径closePath()关闭前面定义的路径moveTo(float x, float y)把canvas的当前路径的结束点移动到x, y对应的点lineTo(float x, float y)把canvas的当前路径从当前结束点连接到x, y对应的点fill()填充canvas当前路径stroke()填充canvas当前路径绘制边框fillStyle()设置填充canvas路径所使用的填充风格strokeStyle()设置绘制canvas路径的填充风格lineWidth()设置笔触线条的宽度4、绘制图形（1）直线

//直线ctx.beginPath();ctx.moveTo(700,50);ctx.lineTo(900,50);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle='blue';//边框颜色，若不设置则默认黑色ctx.stroke();//描边（2）三角形

//三角形 ctx.beginPath(); ctx.moveTo(500,50); ctx.lineTo(600,150); ctx.lineTo(400,150); ctx.closePath();//绘制线条以返回开始点 ctx.lineWidth=10; ctx.strokeStyle='lightgreen'; ctx.stroke();（3）正方形

//手绘正方形 ctx.beginPath(); ctx.moveTo(200,50); ctx.lineTo(300,50); ctx.lineTo(300,150); ctx.lineTo(200,150); ctx.lineTo(200,50); ctx.fill()//填充（4）圆和半圆

//圆形 ctx.beginPath(); ctx.arc(250,250,50,0,2*Math.PI);//圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针 ctx.fill() //半圆 ctx.beginPath(); ctx.arc(100,250,50,0,Math.PI);//圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针 ctx.fill()（5）文字（分别对其填充和描边，二者混合）

//文字 ctx.beginPath(); ctx.font='40px 微软雅黑'; ctx.fillText('Hello,Canvas!',50,350) ctx.beginPath(); ctx.lineWidth=2; ctx.strokeText('Hello,Canvas!',350,350) //颜色与描边混合文字 ctx.beginPath(); ctx.font='40px 微软雅黑'; ctx.fillText('Hello,Canvas!',650,350) ctx.beginPath(); ctx.lineWidth=1; ctx.strokeText('Hello,Canvas!',650,350)（6）添加阴影效果

ctx.shadowColor='yellow'; ctx.shadowOffsetX=10; ctx.shadowOffsetY=10; ctx.shadowBlur=2;//模糊级数

Canvas基础

相关推荐