画布画

第一次接触画布是在做项目的时候。我在实现登录页面的时候用canvas添加了一些样式。那时候，我学的很简单。是时候仔细看看这幅画布了。（相关知识来自MDN）Canvas最早了解到canvas是一种新的HTML5标签。标签与标签非常相似，标签只有宽度和高度两个属性。当没有设置宽度和高度时，画布将初始化为宽度300像素和高度150像素。需要注意的是canvas的高宽是不能用css设置的，会变形，而且有些旧的浏览器版本不支持canvas。如果不支持怎么办？非常简单：只需在标签中提供替换内容即可。不支持的浏览器将忽略容器并在其中呈现后备内容。支持的浏览器将忽略容器中包含的内容，只正常渲染画布。你可以这样做不支持画布的浏览器的替代内容你也可以这样做这里可以发现上面两段代码中canvas的width和height属性可以直接设置在标签中。也可以在JS中设置，没错，canvas就是基于JS绘制的。基本用法下面从代码入手，宏观理解不支持canvas的浏览器的替代内容元素创建一个固定大小的画布，它暴露一个或多个渲染上下文，可用于绘制和处理要显示的内容。我们将专注于2D渲染上下文。其他类型的上下文可能会提供不同类型的渲染；例如，WebGL使用基于OpenGLES的3D上下文。画布最初是空白的。为了演示，首先脚本需要找到渲染上下文，然后在其上绘制。元素有一个名为getContext()的方法，用于获取渲染上下文及其绘制函数。getContext()只有一个参数，即上下文的格式。代码的JS部分的第一行使用document.getElementById()方法获取元素的DOM对象。一旦有了元素对象，就可以使用其getContext()方法访问绘图上下文。至此，一切准备工作。我们已经获取了DOM节点和执行上下文，现在开始绘制图形。不过在画之前需要先了解一个知识点，因为canvas绘图是基于坐标的，所以需要了解什么是canvas网格和坐标空间。默认情况下，canvas元素被网格覆盖。一般来说，网格中的一个单元格相当于画布元素中的一个像素。网格的起点是左上角（坐标（0,0））。所有元素都相对于原点定位。因此，图中蓝色方块左上角的坐标为左起x个像素点（X轴），上侧起y个像素点（Y轴）（坐标为（x,y））。详情如下图所示。让我们画一个三角形。先老套的来JS代码，再详细分析。.getContext("2d");context.moveTo(100,100);context.lineTo(400,400);context.lineTo(100,400);context.lineTo(100,100);context.lineWidth=2;context.strokeStyle="#058";context.fillStyle="rgb(2,100,30)";context.stroke();context.fill();前四行代码是准备工作，这里不再赘述。图形的绘制是基于执行上下文的。我们绘制的三角形起点使用moveTo方法，设置在位置（100,100）。lineTo()方法绘制一条直线，也接受两个坐标值参数。例子中的意思是从(100,100)画一条直线到(400,400)，然后从(400,400)到(100,400)，最后回到(100,100)，这样形成一个环，形成一个三角形。事实上，说三角形已经形成是不准确的。我们只是先确定了坐标，并没有真正完整地画出来。这里可以设置线条的宽度和颜色，使用stroke()方法绘制图形的轮廓。代码中还有一个fill()方法，用于对绘制的图形进行填充。当然，你需要先设置填充颜色。通过canvas的简单操作，我们可以轻松的绘制出一个三角形。这是canvas非常基础的知识。掌握了这些之后，你就可以尝试画一些矩形、多边形、不规则形状、圆形、椭圆形了。目前看来还是很难做到，还需要继续学习。绘制矩形绘制矩形边框：strokeRect(x,y,width,height)绘制填充矩形：fillRect(x,y,width,height)清除指定矩形区域，并使清除部分完全透明：clearRect(x,y,宽度,高度)varcanvas=document.getElementById("canvas");canvas.width=500;canvas.height=500;varctx=canvas.getContext("2d");ctx.beginPath();ctx.strokeRect(50,50,50,50);ctx.closePath();ctx.beginPath();ctx.fillRect(150,50,50,50);ctx.closePath();ctx.beginPath();ctx.fillRect(250,50,50,50);ctx.clearRect(265,65,20,20);ctx.closePath();画出来的图是这样的。上面的代码有一个新东西，beginPath()和closePath()。beginPath()：创建一个新路径。生成后，图形绘制命令指向生成路径的路径。closePath()：路径关闭后，图形绘制命令重定向到上下文。绘制圆弧使用arc()方法绘制圆弧或圆。arc()语法：arc(x,y,radius,startAngle,endAngle,anticlockwise)。以(x,y)为圆心，radius为半径，从startAngle到endAngle绘制圆弧（圆），按照anticlockwise给出的方向生成（默认为clockwise）。其中，startAngle和endAngle参数以弧度定义起始和结束弧。这些都是相对于x轴的。参数anticlockwise是一个布尔值。当为真时，它是逆时针的，否则是顺时针的。这里详细说明一下，弧度的问题。顺时针方向，从0开始，您可以根据需要以弧度设置任意多的π。JS中的Math.PI就是π。ctx.beginPath();ctx.arc(50,50,20,0,Math.PI*0.5,false);ctx.stroke();ctx.closePath();上面的代码画了一个圆弧，用(50,50)是圆心，20是半径，从0到0.5π顺时针画圆弧。绘制二次贝塞尔曲线贝塞尔曲线一般用于绘制复杂且规则的图形。绘制二次贝塞尔曲线的语法：quadraticCurveTo(cp1x,cp1y,x,y)，其中cp1x和cp1y为控制点，x和y为端点。二次贝塞尔曲线有一个起点、一个终点（蓝色）和一个控制点。事实上，二次贝塞尔曲线仍然很常见。在用PPT画图或者画字的时候，你应该用过曲线工具。这是一条非常典型的二次贝塞尔曲线。可以使用二次贝塞尔曲线绘制气球。varcanvas=document.getElementById("canvas");canvas.width=500;canvas.height=500;varctx=canvas.getContext("2d");ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,62);ctx.quadraticCurveTo(25,100,50,100);ctx.quadraticCurveTo(50,120,30,125);ctx.quadraticCurveTo(60,120,65,100);ctx.quadraticCurveTo(1,25,1002))ctx.quadraticCurveTo(125,25,75,25);ctx.stroke();效果如下还有三次贝塞尔曲线，就是多了一个控制点，不过还是有点难度，后面可以深入学习。处理上面提到的矩形、圆形、画布还可以画出一些椭圆等复杂的图形。当然，这些基本的绘制方法仍然可以组合成各种复杂的图形，需要不断的尝试和练习。