HTML5 Canvas基础-优快云博客

本文展示了如何利用HTML和JavaScript实现基本的绘图功能，包括绘制矩形、线、圆、颜色渐变和加载图片，并通过鼠标事件监测进行实时交互。

<!DOCTYPE html>
<head>
<meta charset=utf-8>
</head>
<body>
<canvas id="test" width="500" height="500" onmousemove="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>