Canvas学习笔记1

描述：

HTML5的canvas标签用于绘制图像（通过脚本，通常是JavaScript）。 不过，canvas元素本身没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘制任务。 getContext（）方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 提供完整的getContext(“2d”)对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

canvas三要素：id、width、height（这里的宽高跟style是有区别的） 正常情况下，放在canvas标签内部的内容是不显示的。

例子

<canvas id="canvas1" width="600" height="600"> 这里的内容，正常情况下不显示 </canvas> <script> // 1.找到画布对象 var canvas1 = document.querySelector("#canvas1"); // 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl var ctx = canvas1.getContext("2d"); // 3.绘制一个长方形，参数是x坐标，y坐标，宽度，高度 ctx.rect(50,50,300,300) // 4.设置画笔颜色 ctx.fillStyle="aqua" // 5.填充 ctx.fill() // 6.描边颜色和描边宽度 ctx.lineWidth=20 ctx.strokeStyle="salmon" // 7.描边 ctx.stroke() </script>

画路径（线条）

// 1.找到画布对象 var canvas1 = document.querySelector("#canvas1"); // 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl var ctx = canvas1.getContext("2d"); // 设置开始路径 ctx.beginPath() // 设置绘制的起始点 ctx.moveTo(50,50) // 设置经过某个位置 ctx.lineTo(50,300) // 设置经过某个位置 ctx.lineTo(300,300) // 设置结束路径，不关闭的话就是连起来画，而关闭之后就可以又开始画另外一个 ctx.closePath() // 设置线条起始位置的样式，默认是butt 平直的 ctx.lineCap = "round" //设置成圆角 // 设置两线交汇处的角的样式，默认是miter 尖锐的 ctx.lineJoin="round" //设置成圆角 // 绘制路径 ctx.strokeStyle="aqua" ctx.lineWidth=10 ctx.stroke() // 继续使用填充就会在线段连接起来进行填充，这里的效果就是一个直角三角形 // ctx.fill()

继续执行填充的效果 设置或返回最大斜接长度（有三个等级，即可选值1，2，3）

ctx.miterLimit = 2

画圆

// 1.找到画布对象 var canvas1 = document.querySelector("#canvas1"); // 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl var ctx = canvas1.getContext("2d"); // 画圆，参数x坐标，y坐标，半径，弧度开始（0表示水平x轴方向），弧度结束（2π就是一个圆），（可选）是否逆时针绘制 ctx.arc(300,300,100,0,Math.PI,false) // 最后一个参数默认为false表示顺时针绘制 ctx.fillStyle="bisque" ctx.fill() ctx.stroke()

画文本

// 1.找到画布对象 var canvas1 = document.querySelector("#canvas1"); // 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl var ctx = canvas1.getContext("2d"); // 设置字体大小和名称 ctx.font="50px 微软雅黑" // 参数 文本内容，宽度，高度， ctx.fillText("hellworld",100,100) // 最后一个参数默认为false表示顺时针绘制 // 阴影模糊度,颜色，偏移 ctx.shadowBlur=20 ctx.shadowColor="rgba(0,0,0,1)" ctx.shadowOffsetX = 10 ctx.shadowOffsetY = 10 // 设置描边内容 ctx.strokeText("中午吃啥？",100,200)