canvas的基础入门
程序员文章站
2022-06-19 19:09:46
canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西,比如动画,游戏,动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习! 一、 创建canvas 看一下现在的效果: 除了上述代码那样指定canva ......
canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西,比如动画,游戏,动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3d动态效果。接下来我们一起学习!
一、 创建canvas
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="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 } else { 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 } else { 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.closepath() //结束一个路径的绘制 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.closepath() //结束一个路径的绘制 34 35 context.linewidth = 3; //线的宽度 36 context.strokestyle = 'yellow' //线的颜色 37 context.stroke() //开始绘制 38 39 40 } else { 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'); //获取canvas 13 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 } else { 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.closepath(); 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 } else { 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 anticlockwise=false //顺时针方向绘制,为true则逆时针。默认为顺时针。 8 )
效果图:
改为逆时针的话,在context.arc里面添加参数true
context.arc(300, 300, 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.closepath(); 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.closepath() 34 35 context.fill() 36 } 37 38 } else { 39 alert('您的浏览器不支持canvas,请更换浏览器尝试~') 40 } 41 } 42 </script>
效果图:
可以看出绘制多个弧也是使用beginpath()和closepath()。但是绘制出来的弧自动的把首尾连接起来了,成了一个封闭的弧。这是因为closepath()的原因,如果想只是展示不封闭的弧,只需要把context.closepath()这段代码去掉就行。beginpath()和closepath()并不一定成对出现。填充的时候,有closepath()和没有closepath()效果是一样的。