Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素。和其名称Canvas一样，它就相当于一个画布，我们可以在其上描绘各种图形。
这里所说的绘制图型，不是指我们可以进行可视化的图形绘制，而是要利用javascript在其中进行进行操作。
这里做个简单的canvas实例：
1.在页面中添加canvas元素
首先在页面中添加canvas元素，需要给定其高度、宽度和唯一标识id<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"> <script type="text/javascript" src="canvas.js"></script> </head>
<body onload="draw('canvas')">
<h1>Canvas元素示例</h1>
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
2.绘制矩形
在cavas.js文件中做绘制矩形操作：
function draw(id){
// 1.获取canvas对象
var canvasDom = document.getElementById(id);
if(canvasDom == null){
return false;
}
// 2.获取上下文
var context = canvas.getContext('2d');
// 3.填充与绘制边框
context.fillRect(0, 0, 400, 300);
// 4.设定绘图样式
context.fillStyle = '#EEF'; // 填充颜色
// 5.制定线宽
context.lineWidth = 1;
// 6.指定颜色值
context.strokeStyle = 'blue'; // 设定边框颜色
// 7.绘制矩形
context.fillRect(50, 50, 100, 100);// 填充矩形
context.strokeRect(50, 50, 100, 100); // 绘制矩形边框
}
最终效果
3.绘制圆形
function drawCircle(id){
// 1.获取canvas
var canvasDom = document.getElementById(id);
if(canvasDom == null){
return false;
}
// 2.获取上下文
var context = canvas.getContext('2d');
// 3.填充颜色
context.fillStyle = "#EEF";
// 4.进行绘制
context.fillRect(0, 0, 400, 300);
var n = 0;
for(var i=0; i<10; i++){
// 开始路径
context.beginPath();
// 绘制圆形路径
context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
// 结束路径
context.closePath();
// 填充渐变色
context.fillStyle = "rgba(255, 0, 0, 0.25)";
// 进行图形绘制
context.fill();
}
}
效果图:
