<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="demo" width="600" height="600"></canvas>
<script type="text/javascript">
(function(){
var canvas = document.getElementById('demo');//获取画布
canvas.style.border = '1px solid red'; //画布边框
var ctx = canvas.getContext('2d');//获取画布内容，设置画笔
//矩形
ctx.strokeRect(100,100,50,50); //描边矩形
ctx.fillRect(200,100,50,50); //填充矩形
ctx.fillRect(300,100,50,50); //填充矩形
ctx.clearRect(310,100,50,50); //清楚矩形区域内容
//圆
ctx.beginPath();
ctx.moveTo(300,300);
ctx.arc(300,300,100, 0*Math.PI/180, 360*Math.PI/180,false);
//ctx.arc(300,300,100, 0*Math.PI/180, 30*Math.PI/180,true);//反向
ctx.closePath();
ctx.fill();
ctx.stroke();
}());
</script>
</body>
</html>
描边矩形、填充矩形、矩形清除区域和圆.png
网友评论