<!DOCTYPE html>
<head>
<meta charset=utf-8>
</head>
<body>
<canvas id="test" width="500" height="500" οnmοusemοve="mousexy(event)">
浏览器不支持该格式
</canvas>
<div id="ds"><div>
<script type="text/javascript">
var c=document.getElementById("test");
var test=c.getContext("2d");
//矩形
test.fillStyle="red";
test.fillRect(100,100,300,300);
test.fillStyle="rgba(0,0,255,0.5)";
test.fillRect(200,200,600,600);
//线
test.moveTo(10,10);
test.lineTo(100,100);
test.moveTo(100,10);
test.lineTo(10,50);
test.stroke();
//圆
test.fillStyle="green";
test.beginPath();//重新开始画,防止冲突重叠
test.arc(200,200,30,0,Math.PI*2,true);//x坐标,y坐标,半径,Math.PI是圆周率,true表示逆时针
test.closePath();//结束画布,防止冲突重叠
test.fill();//渲染
//颜色渐变
var grd=test.createLinearGradient(50,50,100,100);//颜色渐变的起始坐标和终点坐标
grd.addColorStop(0,"yellow");//0表示起点0.1,0.2.....1表示终点,配置颜色
grd.addColorStop(0.3,"red");
grd.addColorStop(0.7,"green");
grd.addColorStop(1,"blue");
test.fillStyle=grd;//生成的颜色块赋值给样式
test.fillRect(50,50,175,50)//设置色块
//加载图片
var img=new Image();
img.src="";//具体的路径
test.drawImage(img,220,30);
//监视鼠标
function mousexy(n)
{
x=n.clientX;
y=n.clientY;
document.getElementById("ds").innerHTML="x:"+x+"y:"+y;
}
</script>
</body>
</html>
HTML5 Canvas基础
最新推荐文章于 2024-06-25 10:51:21 发布