canvas的基础入门

更新时间:2023-04-06 06:31:17 阅读：评论：0

canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3d动态效果。接下来我们一起学习！

一、创建canvas

 1 <!doctype html> 2 <html lang="en"> 3  4 <head> 5     <meta chart="utf-8"> 6     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7     <meta http-equiv="x-ua-compatible" content="ie=edge"> 8     <title>canvas基础</title> 9 </head>10 11 <body>12     <canvas id='canvas' width='700' height='400' style="border: 1px solid #aaa;display:block;margin:50px auto "></canvas>13 </body>14 15 </html>

看一下现在的效果:

除了上述代码那样指定canvas的宽高，还可以在js中这样指定:

1 var canvas = document.getelementbyid('canvas');2 3  canvas.width = 700;4  canvas.height = 400;

这样边框内就是一个画布了，接下来我们就可以在这画布里进行绘制了。

二、画一条线段

 1 <script> 2     window.onload = function () { 3         var canvas = document.getelementbyid('canvas'); //获取canvas 4  5         canvas.width = 700;                 //设定canvas的宽度   6         canvas.height = 400;                //设定canvas的高度 7  8         if (canvas.getcontext('2d')) { 9 10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境11 12             context.moveto(100, 100)        //画笔的起始位置13             context.lineto(500, 300)        //画笔的结束位置14             context.linewidth = 5;          //线的宽度15             context.strokestyle = '#005588' //线的颜色16             context.stroke()                //开始绘制17 18         } el {19             alert('您的浏览器不支持canvas,请更换浏览器尝试~')20         }21     }22 </script>

看一下效果图:

三、画一个三角形并着色

 1 <script> 2     window.onload = function () { 3         var canvas = document.getelementbyid('canvas'); //获取canvas 4  5         canvas.width = 700;                 //设定canvas的宽度   6         canvas.height = 400;                //设定canvas的高度 7  8         if (canvas.getcontext('2d')) { 9 10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境11 12             context.moveto(100, 100)        //画笔的起始位置13             context.lineto(500, 300)        //画笔的结束位置14             context.lineto(100, 300)        //画笔的结束位置15             context.lineto(100, 100)        //画笔的结束位置16 17             context.fillstyle='rgb(2,100,30)'   //设置填充颜色18             context.fill()                      //开始进行着色19 20             context.linewidth = 5;          //线的宽度21             context.strokestyle = 'red' //线的颜色22             context.stroke()                //开始绘制23 24         } el {25             alert('您的浏览器不支持canvas,请更换浏览器尝试~')26         }27     }28 </script>

效果图:

四、绘制两个图形

 1 <script> 2     window.onload = function () { 3         var canvas = document.getelementbyid('canvas'); //获取canvas 4  5         canvas.width = 700;                 //设定canvas的宽度   6         canvas.height = 400;                //设定canvas的高度 7  8         if (canvas.getcontext('2d')) { 9 10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境11 12             context.beginpath()            //开始一个新的路径绘制13 14             context.moveto(100, 100)        //画笔的起始位置15             context.lineto(500, 300)        //画笔的结束位置16             context.lineto(100, 300)        //画笔的结束位置17             context.lineto(100, 100)        //画笔的结束位置18 19             context.clopath()             //结束一个路径的绘制20 21             context.fillstyle='rgb(2,100,30)'   //设置填充颜色22             context.fill()                      //开始进行着色23 24             context.linewidth = 5;          //线的宽度25             context.strokestyle = 'red'     //线的颜色26             context.stroke()                //开始绘制27 28             context.beginpath()            //开始一个新的路径绘制29 30             context.moveto(100,50)          //画笔的起始位置31            理由充分 context.lineto(600,300)         //画笔的结束位置32 33             context.clopath()             //结束一个路径的绘制34 35             context.linewidth = 3;          //线的宽度36             context.strokestyle = 'yellow'    //线的颜色37             context.stroke()                //开始绘制38             39 40         } el {41             alert('您的浏览器不支持canvas,请更换浏览器尝试~')42         }43     }44 </script>

效果图:

五、绘制一个七巧板

 1 <script> 2     var tangram = [ 3         { 长沙军校p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: '#caff67' }, 4         { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: '#67becf' }, 5         { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: '#ef3d61' }, 6         { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: '#f9f51a' }, 7         { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: '#a594c0' }, 8         { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: '#fa8ecc' }, 9         { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: '#f6ca29' },10     ]11     window.onload = function () {12         var canvas = document.getelementbyid('canvas'); //获取canvas13 14         canvas.width = 800;                 //设定canvas的宽度  15         canvas.height = 800;                //设定canvas的高度16 17         if (canvas.getcontext('2d')) {18 19             var context = canvas.getcontext('2d');  //获取绘图的上下文环境20 21             for (var i = 0; i < tangram.length; i++) {22                 draw(tangram[i], context)23             }24 25 26         } el {27             alert('您的浏览器不支持canvas,请更换浏览器尝试~')28         }29     }30 31     function draw(piece, context) {32         context.beginpath();33         context.moveto(piece.p[0].x, piece.p[0].y);34         for (var i = 1; i < piece.p.length; i++) {35             context.lineto(piece.p[i].x, piece.p[i].y)36         }37         context.clopath();38 39         context.fillstyle = piece.color;40         context.fill();41 42         context.strokestyle = 'black';43         context.linewidth = 3;44         context.stroke();45 46     }47 </script>

效果图:

六、绘制一段弧

 1 <script> 2     window.onload = function () { 3         var canvas = document.getelementbyid('canvas'); //获取canvas 4  5         canvas.width = 600;                 //设定canvas的宽度   6         canvas.height = 600;                //设定canvas的高度 7  8         if (canvas.getcontext('2d')) { 9 10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境11 12             context.linewidth = 5;13             context.strokestyle = '#005588';14             context.arc(300, 300, 200, 0, 1.5 * math.pi);15             context.stroke();16 17         } el {18             alert('您的浏览器不支持canvas,请更换浏览器尝试~')19         }20     }21 </script>

context.arc各参数的含义:

1  　　context.arc(2                 centerx ,           //圆心的x轴坐标位置3                 centery,            //圆心的y轴坐标位置4                 radius,             //圆弧半径的值5                 startingangle,      //以哪个弧度制开始6                 endingangle,        //在哪个弧度制结束7                 anticlockwi=fal //顺时针方向绘制,为true则逆时针。默认为顺时针。8             )

效果图:

改为逆时针的话，在context.arc里面添加参数true

context.arc(300, 3宾馆员工管理制度00, 200, 0, 1.5 * math.pi,true);

效果图:

七、绘制多段弧和着色

 1 <script> 2     window.onload = function () { 3         var canvas = document.getelementbyid('canvas'); //获取canvas 4  5         canvas.width = 1000;                 //设定canvas的宽度   6         canvas.height = 600;                //设定canvas的高度 7  8         if (canvas.getcontext('2d')) { 9 10             var context = canvas.getcontext('2d');  //获取绘图的上下文环境11 12             context.linewidth = 5;13             context.strokestyle = '#005588';14 15             for (var i = 0; i < 10; i++) {16                 context.beginpath();17                 context.arc(50 + i * 100, 100, 40, 0, 2 * math.pi * (i + 1) / 10);18                 context.clopath();19                 context.stroke();20             }21 22             for (var i = 0; i < 10; i++) {23                 context.beginpath();24                 context.arc(50 + i * 100, 300, 40, 0, 2 * math.pi * (i + 1) / 10);25 　　　　　　　　　　　　　　　　　　　　26                 context.stroke();27        电脑没声音是什么原因     }28 29             context.fillstyle = '#005588'30             for (var i = 0; i < 10; i++) {31                 context.beginpath()32                 context.arc(50 + i * 100, 500, 40, 0, 2 * math.pi * (i + 1) / 10);33                 context.clopath()34 35                 context.fill()36             }37 38         } el {39             alert('您的浏览器不支持canvas,请更换浏览器尝试~')40         }41     }42 </script>

效果图:

翘翘板打一成语

可以看出绘制多个弧也是使用beginpath()和clopath()。但是绘制出来的弧自动的把首尾连接起来了，成了一个封闭的弧。这是因为clopath()的原因，如果想只是展示不封闭的弧，只需要把context.clopath()这段代码去掉就行。beginpath()和clopath()并不一定成对出现。填充的时候，有clopath()和没有clopath()效果是一样的。