H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

一：

1.鼠标监视坐标值

<!DOCTYPE html>
<head>
    <meta charset=UTF-8> 
    <title>canvas的演示</title>
    <script src="D:jqueryjquery-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:jqueryjquery-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:jqueryjquery-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:jqueryjquery-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:jqueryjquery-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:jqueryjquery-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.运行效果　　