<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<canvas id="php100" width="500" height="500" οnmοusemοve="mousexy(event)"></canvas>
<div id="ds"></div>
<script type="text/javascript">
var c = document.getElementById("php100");
var p100 = c.getContext("2d");
// 画矩形,定义颜色,透明度
p100.fillStyle = "#FF0000"; //定义颜色
p100.fillRect(0, 0, 300, 300); //定义矩形的大小
p100.fillStyle = "rgba(0,0,255,0.5)"; //定义颜色,支持透明
p100.fillRect(200, 200, 500, 500); //定义矩形大小
//画直线,定义连接,节点
p100.moveTo(10, 10);//起始位置
p100.lineTo(150, 150);//终止位置
p100.lineTo(10,50);
p100.stroke();
//画圆,定义弧度,节点
p100.fillStyle = "blue";//定义演示
p100.beginPath();//重新开始画图
p100.arc(200, 200, 60, 0, Math.PI * 2, true);//x坐标 y坐标 半径 始 终 顺时针
p100.closePath();//结束画布
p100.fill();
//画渐变色,定义节点渐变效果
var grd = p100.createLinearGradient(100, 100, 175, 50);//颜色渐变的起始坐标和终点坐标
grd.addColorStop(0, "yellow");
grd.addColorStop(0.3, "green");
grd.addColorStop(0.6, "red");
grd.addColorStop(1, "blue");
p100.fillStyle = grd;//生成的颜色块赋值给样式
p100.fillRect(100,100,175,50);//设置色块
// 画直线,定义连接,节点
var img = new Image()
img.src = "logo.png"
p100.drawImage(img, 220, 30);
//监视鼠标
function mousexy(n) {
x = n.clientX;
y = n.clientY;
document.getElementById("ds").innerHTML = "坐标: x轴" + x + " y轴" + y;
}
</script>
</body>
</html>