一、什么是canvas?
canvas是h5新增的标签。由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。简单的来说就是一块画布。
新增的标签,所以它是有兼容性问题的。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 , Internet Explorer 从 IE9 开始 。Chrome 和 Opera 9+ 也支持
二、canvas的使用。
在html文件的
标签中书写canvas标签。并限定画布的大小(不设宽高的话,默认宽300px,高150px),由于有一部分浏览器并不支持canvas标签,所以在标签里加入的替换的内容,当浏览器不显示canvas标签时,会有替换的内容做提示用。 你的浏览器不支持 canvas,请升级你的浏览器。
接着我们需要用js对canvas进行绘画。需要先获取canvas元素,如下:
var canvas = document.getElementById('canvas'); // 获取canvas标签var ctx = canvas.getContext('2d'); // 创建内容对象 if (!canvas.getContext) return; // 画图判断,如果不能画,自动结束
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们先在js文件里画一条直线:
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; ctx.moveTo(0,0); // 指定线的起点 ,moveTo的两个参数依次代表x轴坐标,y轴坐标。 ctx.lineTo(200,100); // 指定线的下一点 ,lineTo的两个参数依次代表x轴坐标,y轴坐标。 ctx.stroke(); // 把刚才的路径以线条的方式展示出来 // 在此处可以接着画出更多内容}draw()
得到如图所示的一条斜线:
![0c03604524d8814dcec0b552b49fdbf0.png](https://img-blog.csdnimg.cn/img_convert/0c03604524d8814dcec0b552b49fdbf0.png)
解释一下上面的位置坐标,现在我们设置的画布宽和高都是300,(0,0)就相当于画布的左上角,(300,300)就相当于画布的右下角。
画一条宽度为10的线:
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineWidth = 10; //设置线的宽度10px; ctx.stroke(); }draw()
![767f646526db70ac038b7996436d082d.png](https://img-blog.csdnimg.cn/img_convert/767f646526db70ac038b7996436d082d.png)
设置线的端点的样子和线条颜色:
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineWidth = 10; ctx.lineCap="round"; // 此处设置以圆形结束,"butt", "round", "square"可以自己试一试。 ctx.strokeStyle="blue" ; //设置线条的颜色,如果不设置,默认填充黑色 ctx.stroke(); }draw()
![866e838a981d6c670351c7cfec672bde.png](https://img-blog.csdnimg.cn/img_convert/866e838a981d6c670351c7cfec672bde.png)
画虚线:用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组,来指定线段与间隙的交替;lineDashOffset属性设置起始偏移量。
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; ctx.setLineDash([20, 5]); // [实线长度, 间隙长度] ctx.lineDashOffset = -0; ctx.strokeRect(50, 50, 210, 210);}draw()
![6e713c086649ffcb2483d3a3ba4d89e2.png](https://img-blog.csdnimg.cn/img_convert/6e713c086649ffcb2483d3a3ba4d89e2.png)
画连续两条直线:
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; ctx.moveTo(100,100); ctx.lineTo(150,150); ctx.lineTo(200,100); ctx.stroke(); }draw()
![021a3e046b6e0d323d8ac0159750fa0e.png](https://img-blog.csdnimg.cn/img_convert/021a3e046b6e0d323d8ac0159750fa0e.png)
画一个三角形:
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; // 第一条路径 ctx.beginPath(); //新建一条path ctx.moveTo(100,100); ctx.lineTo(150,150); ctx.lineTo(200,100); ctx.closePath(); // 结束这条路径。这时候会把起点和终点连接起来。 ctx.stroke(); }draw()
![9d7d70956bbac8e418590035d947a2ab.png](https://img-blog.csdnimg.cn/img_convert/9d7d70956bbac8e418590035d947a2ab.png)
你会发现这次画直线多了ctx.beginPath();ctx.closePath();这样的话就可以自动首尾相连,成为一个闭合的图形,当然,你直接画一条线把首尾连接起来也可以。
可以给三角形填充颜色:
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; // 第一条路径 ctx.beginPath(); //新建一条path ctx.moveTo(100,100); ctx.lineTo(150,150); ctx.lineTo(200,100); ctx.closePath(); // 结束这条路径。这时候会把起点和终点连接起来。 ctx.stroke(); ctx.fill(); //填充闭合区域。如果path没有闭合,则fill()会自动闭合路径。}draw()
![0c6860ccc4a37932370fc3fed82e4328.png](https://img-blog.csdnimg.cn/img_convert/0c6860ccc4a37932370fc3fed82e4328.png)
填充我们自定义颜色
function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (!canvas.getContext) return; // 第一条路径 ctx.beginPath(); ctx.moveTo(0,40); ctx.lineTo(200,40); ctx.lineTo(200,60); ctx.closePath(); ctx.strokeStyle="blue"; ctx.stroke(); ctx.fillStyle="red"; //设置填充的颜色,如果不设置,默认填充黑色 ctx.fill(); }draw()
![b28d87947ede656faaf688051e7de67d.png](https://img-blog.csdnimg.cn/img_convert/b28d87947ede656faaf688051e7de67d.png)
欢迎点赞关注,下期继续讲解canvas更多知识!