html5-canvas画图标签

原创 aa953788477 随笔 html5学习笔记 929阅读 2014-08-24 22:30:13 举报

canvas是html5新增的用于画图的标签,在做页游是应用广泛
下面我简单介绍下几种图形的使用
Canvas标签定义,并获得坐标
画矩形,定义颜色,透明度
画直线,定义连接,节点
画圆,定义弧度,节点
画渐变色,定义节点渐变效果
读入一张图片

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>canvas Demo</title>
<body>
<!--canvas画布-->
<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(100,100,300,300);
p100.fillStyle="rgba(0,0,255,0.4)";
p100.fillRect(200,200,500,500);
//=========线=========
p100.fillStyle="red";
p100.moveTo(10,10);//起始位置
p100.lineTo(150,50);//终止位置
p100.lineTo(10,50);//如果没有歧视位置则从结束位置开始画
p100.stroke();//结束图形
//===========圆========
p100.fillStyle="blue";
p100.beginPath();//从新开始画,防止冲突重叠
p100.arc(200,300,60,0,Math.PI*2,true);
p100.closePath();
p100.fill();//停止渲染
//===========颜色渐变====
var grd = p100.createLinearGradient(50,50,175,50);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"red");
p100.fillStyle=grd;
p100.fillRect(50,50,175,50);
function mousexy(n){
var x= n.clientX;
var y=n.clientY;
document.getElementById("ds").innerHTML="坐标: x轴"+x+" y轴"+y;
}
</script>
</body>
</head>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复