网页|HTML5 也可以画一画（canvas）
1.引言
在日常生活中总喜欢涂涂画画写写，这样可以使表达更加直观，记录的也更加详细，而在HTML5中同样可以画一画。canvas意为画布，现实生活中用它来作画，在HTML5中的canvas与之类似，可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。
2.初识画布
HTML5 canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。因为canvas> 标签只是图形容器，所以必须使用脚本来绘制图形。
（1）创建一个画布
HTML5中提供了canvas> 标签，使用canvas> 标签可以在网页中创建一个矩形区域的画布。但值得注意的是在默认情况下 canvas> 元素没有边框和内容。
canvas id="cavsElem" width="400" height="300"> 您的浏览器不支持canvas /canvas> |
画布本身不具有绘制功能，可以通过脚本语言（一般为JavaScript）操作绘制图形的API进行绘制操作。可以使用getElementById()方法获取画布。
var canvas = document.getElementById('cavsElem'); |
（2）准备画笔
当准备好画画的纸之后应该去准备画笔。这里的画笔其实就是context对象，该对象可以使用JavaScript脚本获得。
var context = canvas.getContext('2d'); |
（3）坐标和起点
准备工作完成，接下来就该考虑从哪里开始画画了。在canvas图形绘制中，不能像日常生活中，提笔想在哪里画就在哪里画，在这里需要用到坐标来实现。
图1 坐标轴示例图
context.moveTo(x,y); |
（4）绘制线条
接下来终于可以开始画画了。在canvas图形绘制中，首先需要画出线条。lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一个线头点。
context.lineTo(x,y); |
（5）路径
绘制直线确定了起始点和线头点后，便形成了一条绘制路径，但如果要绘制复杂路径，就必须要有路径的开始和结束。
context.beginPath(); /*开始路径*/ context.closePath(); /*闭合路径*/ |
（6）描边和填充
完成了画的线条轮廓的草稿，接下来就是准备上色。在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke()方法根据路径进行描边和使用fill()方法进行图形的填充。
context.stroke(); //描边 context.fill(); //填充 |
3.画布实例
（1）Canvas-文本
使用 canvas 绘制文本，首先要用font来定义字体，然后通过使用fillText(text,x,y)来定义在 canvas 上绘制实心的文本，或者使用strokeText(text,x,y) 来定义在 canvas上绘制空心的文本。
示例：
!DOCTYPE html> html> head> meta charset="utf-8"> meta charset="utf-8" /> title> 空心文本/title> /head> body> canvas id="myCanvas" width="300" height="100" style="border:1px solid #d3d3d3; "> 您的浏览器不支持 HTML5 canvas 标签。 /canvas> script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("我是个空心的文本哦！",10,50); /script> /body> /html> |
效果图：
图2 空心文本效果图
（2）Canvas - 形状
绘制圆形示例：
!DOCTYPE html> html> head> meta charset="UTF-8"> title> 圆形/title> style type="text/css"> canvas{ border:1px solid; } /style> /head> body>
canvas id="myCanvas" width="200px" height="200px"> 浏览器不支持canvas元素时显示该文本内容 /canvas>
script type="text/javascript"> var c=document.getElementById("myCanvas"); var context=c.getContext("2d"); //fillStyle属性用于指定绘制图形的填充颜色 context.fillStyle="palegreen"; //beginPath()方法用于开始绘制路径 context.beginPath(); //arc()方法参数：arc(x,y,radius,startAngle,endAngle,counterclockwise) //参数x，y为起点位置，radius为圆形的半径，startAngle为开始角度，endAngle为结束角度 //counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针 context.arc(100,100,50,0,2*Math.PI,false); //closePath()方法用于将图形闭合起来 context.closePath(); //fill()方法将图形填充 context.fill(); /script> /body> /html> |
运行效果：
图3 圆形效果图
绘制三角形示例：
html> head> meta charset="UTF-8"> title> 三角形/title> style type="text/css"> canvas{ border:1px solid; } /style> /head> body> canvas id="myCanvas" width="200px" height="200px"> 浏览器不支持canvas元素时显示该文本内容 /canvas> script type="text/javascript"> var c=document.getElementById("myCanvas"); var context=c.getContext("2d"); context.fillStyle="greenyellow"; context.beginPath(); context.moveTo(25,25); context.lineTo(150,25); context.lineTo(25,150); context.fill(); /script> /body> /html> |
运行效果：
图4 三角形效果图
绘制笑脸示例：
!DOCTYPE html> html> head> meta charset="UTF-8"> title> 三角形/title> /head>
body onload="draw(); "> canvas id="canvas" width="150" height="150"> /canvas> script> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var context = canvas.getContext("2d"); context.beginPath(); context.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制 context.moveTo(110, 75); context.arc(75, 75, 35, 0, Math.PI, false); // 嘴巴(顺时针) context.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼 context.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼 context.stroke(); } } /script> /body> /html> |
运行效果：
图5 笑脸效果图
4.总结
通过使用canvas画布再规定画笔的起点、去向、描边、填充等，可以根据自己的设想画出2d的图形。这种方法看似简单，但也要思考好画笔的每一步，这样才能让画的图没有偏差，因为需要计算画笔的每一步的走向，所以使用canvas画布画图看似简单，其实也需要思维清晰哦。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 网页|HTML5 也可以画一画（canvas）
本文地址： https://pptw.com/jishu/313683.html