1.引言
在日常生活中总喜欢涂涂画画写写,这样可以使表达更加直观,记录的也更加详细,而在HTML5中同样可以画一画。canvas意为画布,现实生活中用它来作画,在HTML5中的canvas与之类似,可以称它为“网页中的画布”,有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。
2.初识画布
HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。因为 标签只是图形容器,所以必须使用脚本来绘制图形。
(1)创建一个画布
HTML5中提供了标签,使用标签可以在网页中创建一个矩形区域的画布。但值得注意的是在默认情况下 元素没有边框和内容。
您的浏览器不支持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上绘制空心的文本。
示例:
空心文本您的浏览器不支持 HTML5 canvas 标签。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("我是个空心的文本哦!",10,50);
效果图:
图2 空心文本效果图
(2)Canvas - 形状
绘制圆形示例:
圆形canvas{border:1px solid;}
浏览器不支持canvas元素时显示该文本内容
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();
运行效果:
图3 圆形效果图
绘制三角形示例:
三角形canvas{border:1px solid;}
浏览器不支持canvas元素时显示该文本内容
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();
运行效果:
图4 三角形效果图
绘制笑脸示例:
三角形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();
}
}
运行效果:
图5 笑脸效果图
4.总结
通过使用canvas画布再规定画笔的起点、去向、描边、填充等,可以根据自己的设想画出2d的图形。这种方法看似简单,但也要思考好画笔的每一步,这样才能让画的图没有偏差,因为需要计算画笔的每一步的走向,所以使用canvas画布画图看似简单,其实也需要思维清晰哦。END
编 辑 | 王楠岚
责 编 | 杨金月where2go 团队微信号:算法与编程之美