H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入
一：
1.鼠标监视坐标值
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>canvas的演示</title>
<script src="D:\jquery\jquery-1.12.4.min.js""></script>
</head>
<body>
<canvas id="tt" width="100" height="100" onmousemove="mousexy(event)">不支持H5</canvas>
<div id="xy"></div>
<script type="text/javascript">
var c=document.getElementById("tt");
var tt=c.getContext("2d");
function mousexy(n){
x=n.clientX;
y=n.clientY;
document.getElementById("xy").innerHTML="x:"+x+"y:"+y;
}
</script>
</body>
</html>
2.运行结果
3.画矩形
两种方式：
其中，rgb支持透明度，0.5是透明度为0.5，所以可以看到底下的另一个矩形的颜色
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>canvas的演示</title>
<script src="D:\jquery\jquery-1.12.4.min.js""></script>
</head>
<body>
<canvas id="tt" width="400" height="400" >不支持H5</canvas>
<script type="text/javascript">
var c=document.getElementById("tt");
var tt=c.getContext("2d");
//yi
tt.fillStyle="red";
tt.fillRect(0,0,200,200);
//er
tt.fillStyle="rgba(0,0,255,0.5)";
tt.fillRect(100,100,300,300)
</script>
</body>
</html>
4.运行结果
5.画线
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>canvas的演示</title>
<script src="D:\jquery\jquery-1.12.4.min.js""></script>
</head>
<body>
<canvas id="tt" width="300" height="300" >不支持H5</canvas>
<script type="text/javascript">
var c=document.getElementById("tt");
var tt=c.getContext("2d");
//line
tt.moveTo(30,30);
tt.lineTo(80,290);
tt.lineTo(130,10);
tt.stroke();
</script>
</body>
</html>
6.运行结果
7.画圆
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>canvas的演示</title>
<script src="D:\jquery\jquery-1.12.4.min.js""></script>
</head>
<body>
<canvas id="tt" width="300" height="300">不支持H5</canvas>
<script type="text/javascript">
var c=document.getElementById("tt");
var tt=c.getContext("2d");
tt.fillStyle="blue";
tt.beginPath();
tt.arc(100,100,50,0,Math.PI*2,true);
tt.closePath();
tt.fill();
</script>
</body>
</html>
8.运行结果
9.渐近色
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>canvas的演示</title>
<script src="D:\jquery\jquery-1.12.4.min.js""></script>
</head>
<body>
<canvas id="tt" width="400" height="400">不支持H5</canvas>
<script type="text/javascript">
var c=document.getElementById("tt");
var tt=c.getContext("2d");
//
var change=tt.createLinearGradient(100,100,200,50);
change.addColorStop(0,"yellow");
change.addColorStop(1,"blue");
tt.fillStyle=change;
tt.fillRect(100,100,200,50);
</script>
</body>
</html>
10.运行效果
11.图形载入
目前在谷歌浏览器上不可以展示，图中使用的是I浏览器
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>canvas的演示</title>
<script src="D:\jquery\jquery-1.12.4.min.js""></script>
</head>
<body>
<canvas id="tt" width="400" height="400">不支持H5</canvas>
<script type="text/javascript">
var c=document.getElementById("tt");
var tt=c.getContext("2d");
//
var img=new Image();
img.src="logo.png";
tt.drawImage(img,100,100);
</script>
</body>
</html>
12.运行效果
