HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canva

2020-04-24 19:55:42易采站长站整理

HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。

好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。

1、使用Canvas绘制直线:

 

XML/HTML Code复制内容到剪贴板

<!doctype html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
    </head>  
    <style type="text/css">  
        canvas{border:dashed 2px #CCC}   
    </style>  
    <script type="text/javascript">  
        function $$(id){   
            return document.getElementById(id);   
        }   
        function pageLoad(){   
            var can = $$(‘can’);   
            var cancans = can.getContext(‘2d’);   
            cans.moveTo(20,30);//第一个起点   
            cans.lineTo(120,90);//第二个点   
            cans.lineTo(220,60);//第三个点(以第二个点为起点)   
            cans.lineWidth=3;   
            cans.strokeStyle = ‘red’;   
            cans.stroke();   
        }   
    </script>  
    <body onload="pageLoad();">  
        <canvas id="can" width="400px" height="300px">4</canvas>  
    </body>  
</html>