<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5 canvas API</title>
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById('can');
//找不到元素的处理
if (canvas==null){
console.info('canvas元素不存在..');
return false;
}
/**
* 获取上下文(2d)平面图
* @type {CanvasRenderingContext2D}
*/
var context = canvas.getContext('2d');
//设置填充样式
context.fillStyle="yellow";
//填充一个矩形,无背景色
context.fillRect(10,10,250,250);
//填充样式,颜色英文,rgb,十六进制数均可以
context.fillStyle="green";
//填充一个矩形
context.fillRect(140,140,250,250);
//设置图形边框的样式
context.strokeStyle="red";
//边框线宽
context.lineWidth=10;
//绘制一个矩形(x,y,w,h) 在坐标(x,y)处绘制宽和高为(w,h)的矩形
context.strokeRect(100,100,200,200);
//清除矩形,擦除指定区域中的图像,让其背景变为透明
context.clearRect(100,100,200,200);
/**
* 绘制圆形或者圆弧
* */
for(var i=0;i<10;i++){
//开始创建路径
context.beginPath();
/**
* arc有六个参数(x,y,radius,startAngle,endAngle,anticlockwise)
* (起点横坐标,起点纵坐标,圆形(弧)的半径,开始角度,结束角度,是否顺时针方向绘制)
*/
context.arc(35*i,35*i,i*6,0,Math.PI*2,true);
//关闭路径,路径的绘制工作完成,还没开始绘制图像
context.closePath();
///填充颜色
context.fillStyle='rgba(245,0,0,0.5)';
//填充图形
context.fill();
}
/**
* 绘制一个圆弧
*/
context.beginPath();
context.arc(300,300,100,90,120,true);
context.closePath();
context.fillStyle="pink";
context.fill();
var can= document.getElementById("line");
/**
*
* @type {CanvasRenderingContext2D}
*/
var ctx =can.getContext('2d');
ctx.fillStyle='rgb(100,200,210)';
ctx.fillRect(0,0,350,350);
var m=0;
var nx=100;
var ny=100;
var s=100;
ctx.beginPath();
ctx.fillStyle='rgb(200,240,210)';
ctx.strokeStyle="rgb(0,0,123)";
var $x=Math.sin(0);
var $y=Math.cos(0);
var $d=Math.PI/15*11;
for (var i=0;i<30;i++){
var $x=Math.sin($d*i);
var $y=Math.cos($d*i);
ctx.lineTo(nx+$x*s,ny+$y*s);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="can" width="400" height="400" style="background-color:gray;">
您的浏览器不支持canvas!
</canvas>
<canvas id="line" width="400" height="400" style="background-color:salmon;">
您的浏览器不支持canvas!
</canvas>
</body>
</html>
复制代码