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(