第四讲 HTML5 Canvas 画图标签 & 画线，圆，渐变色

来源：互联网发布：win10如何开启23端口编辑：程序博客网时间：2024/04/30 18:37

<!DOCTYPE html>

<head>

</head>

<body>

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>