html5中canvas基本应用

最新推荐文章于 2021-10-26 15:45:25 发布

原创最新推荐文章于 2021-10-26 15:45:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了HTML Canvas的基本概念，展示了如何使用Canvas绘制图形、添加颜色渐变、加载图像，并通过鼠标事件实现交互。

<!DOCTYPE html> 
<head> 
<meta charset=utf-8> 
<title>canvas</title>
<script src="jquery.min.js"></script>
</head>
<body>
<canvas id="php100" width="500" height="500" onmousemove="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,300,300); //定义矩形大小


//========线======
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形


//=======圆=======
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画，防止冲突重叠
p100.arc(200,200,30,0,Math.PI*2,true); //x坐标，y坐标，直径，Math.PI是圆周率
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染


//======颜色渐变====
var grd=p100.createLinearGradient(100,100,175,50); //颜色渐变的起始坐标和终点坐标
grd.addColorStop(0,"yellow"); //0表示起点..0.1 0.2 ...1表示终点，配置颜色
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>