详解HTML5 canvas画图根基行使要领
|
副问题[/!--empirenews.page--]
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，现实上，这个标签和其他的标签一样，其非凡之处在于该标签可以获取一个CanvasRenderingContext2D工具，我们可以通过JavaScript脚原来节制该工具举办画图。 <canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，尚有height和width属性。在<canvas>>元素上画图首要有三步： 获取<canvas>元素对应的DOM工具，这是一个Canvas工具； 挪用Canvas工具的getContext()要领，获得一个CanvasRenderingContext2D工具； 挪用CanvasRenderingContext2D工具举办画图。 绘制线段moveTo()和lineTo() 以下是一个简朴的<canvas>画图示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas画图演示</title> <style type="text/css"> #canvas{ border: 1px solid #ADACB0; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="canvas" width="300" height="300"> 你的赏识器还不支持canvas </canvas> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //配置工具起始点和终点 context.moveTo(10,10); context.lineTo(200,200); //配置样式 context.lineWidth = 2; context.strokeStyle = "#F5270B"; //绘制 context.stroke(); </script> </html> 假如没有通过moveTo()出格指定，lineTo()的起始点是以上一个点为准。因此，假如必要从头选择起始点，则必要通过moveTo()要领。假如必要对差异的线段配置样式，则必要通过context.beginPath()从头开启一条路径，下面是一个示例： <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //配置工具起始点和终点 context.beginPath(); context.moveTo(100,100); context.lineTo(700,100); context.lineTo(700,400); context.lineWidth = 2; context.strokeStyle = "#F5270B"; //绘制 context.stroke(); context.beginPath(); context.moveTo(100,200);//这里的moveTo换成lineTo结果是一样的 context.lineTo(600,200); context.lineTo(600,400); //strokeStyle的颜色有新的值，则包围上面配置的值 //lineWidth没有新的值，则按上面配置的值表现 context.strokeStyle = "#0D25F6"; //绘制 context.stroke(); </script> 绘制矩形rect()、fillRect()和strokeRect() context.rect( x , y , width , height )：只界说矩形的路径； context.fillRect( x , y , width , height )：直接绘制出添补的矩形； context.strokeRect( x , y , width , height )：直接绘制出矩形边框； <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //行使rect要领 context.rect(10,10,190,190); context.lineWidth = 2; context.fillStyle = "#3EE4CB"; context.strokeStyle = "#F5270B"; context.fill(); context.stroke(); //行使fillRect要领 context.fillStyle = "#1424DE"; context.fillRect(210,10,190,190); //行使strokeRect要领 context.strokeStyle = "#F5270B"; context.strokeRect(410,10,190,190); //同时行使strokeRect要领和fillRect要领 context.fillStyle = "#1424DE"; context.strokeStyle = "#F5270B"; context.strokeRect(610,10,190,190); context.fillRect(610,10,190,190); </script> 这里必要声名两点：第一点就是stroke()和fill()绘制的前后次序，假如fill()后头绘制，那么当stroke边框较大时，会明明的把stroke()绘制出的边框遮住一半；第二点：配置fillStyle或strokeStyle属性时，可以通过“rgba(255,0,0,0.2)”的配置方法来配置，这个配置的最后一个参数是透明度。 其它尚有一个跟矩形绘制有关的：破除矩形地区：context.clearRect(x,y,width,height)。 吸取参数别离为：破除矩形的起始位置以及矩形的宽和长。 在上面的代码中绘制图形的最后加上： context.clearRect(100,60,600,100); 可以获得以下结果： 绘制五角星 通过对五角星说明，我们可以确定各个极点坐标的纪律，这里必要留意的一点是：在canvas中，Y轴的偏向是向下的。 响应代码如下： var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); //配置是个极点的坐标，按照极点拟定路径 for (var i = 0; i < 5; i++) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200, -Math.sin((54+i*72)/180*Math.PI)*80+200); } context.closePath(); //配置边框样式以及添补颜色 context.lineWidth="3"; context.fillStyle = "#F6F152"; context.strokeStyle = "#F5270B"; context.fill(); context.stroke(); 最后结果： 线条属性 除了上面用到的lineWidth属性，线条尚有以下几个属性： lineCap 属性配置或返回线条结尾线帽的样式，可以取以下几个值： “butt” 向线条的每个结尾添加平直的边沿（默认）； “round” 向线条的每个结尾添加圆形线帽； “square” 向线条的每个结尾添加正方形线帽。 lineJoin 属性当两条线交汇时配置或返回所建设边角的范例，可以取以下几个值： “miter” 建设尖角(默认)； “bevel” 建设斜角； “round” 建设圆角。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
