1:canvas模版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas模版</title>
</head>
<body>
<canvas id="canvas" width="800" height="600">
您的浏览器太Low了,请更新!
</canvas>
<script>
var canvas = document.getElementById('canvas');
if(canvas.getContext){
// 说明支持当前浏览器,在其中写代码...
var ctx = canvas.getContext('2d');
}else{
alert('您的浏览器太Low了,请更新!');
}
</script>
</body>
</html>
2:canvas绘制矩形
<script>
function draw(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
// 说明支持当前浏览器,在其中写代码...
var ctx = canvas.getContext('2d');
// 填充矩形
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fillRect(10,10,350,300);
ctx.fillStyle = 'rgba(0,0,200,0.5)';
ctx.fillRect(30,30,350,300);
// 描边矩形
ctx.strokeStyle = 'rgb(200,0,0)';
ctx.strokeRect(10,10,350,300);
ctx.strokeStyle = 'rgba(0,0,200,0.5)';
ctx.strokeRect(30,30,350,300);
}
}
</script>
3:清除矩形指定区域
/*
* 绘制一个填充矩形
* fillRect(x,y,width,height)
*
* 绘制一个描边矩形
* strokeRect(x,y,width,height)
*
* 清除指定矩形区域
* clearRect(x,y,width,height)
*/