码迷,mamicode.com
首页 > Web开发 > 详细

html5之canvas绘图 1.写字板功能

时间:2014-10-28 10:24:04      阅读:549      评论:0      收藏:0      [点我收藏+]

标签:html5   js   canvas   

       写字板事例:

    bubuko.com,布布扣

      写字板分析:1.点击鼠标开始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):

      代码:

<strong><!doctype html>  
</strong><html>  
    <head>  
        <meta charset="utf-8">  
        <title>Canvas</title>  
        <style type="text/css">  
            body {  
                margin: 0px;  
                padding: 0px;  
            }  
            #canvas {  
                margin: 0px;  
                padding: 0px;  
                border: 1px solid #000000;    
            }  
        </style>  
    </head>  
    <body>  
        <canvas id="canvas" width="400" height="400">当前浏览器不支持canvas</canvas>  
        <script type="text/javascript" src="utils.js"></script>  
        <script type="text/javascript" src="arrow.js"></script>  
        <script type="text/javascript">  
            window.onload=function(){  
            	
                var canvas=document.getElementById("canvas");  
                var context=canvas.getContext("2d"); 
               
                /*var mouse=utils.captureMousePosition(canvas); */ 
                              
                 //添加mousedown监听事件,在用户鼠标按下后开始画线,并注册mousemove事件  
                canvas.addEventListener("mousedown",function(event){ 
                	
                    context.beginPath();  
                    context.moveTo(event.clientX, event.clientY);
                    //alert("-------------")
                    canvas.addEventListener("mousemove",onMouseMove,false);  
                },false);  
                                  
                 //在鼠标移动时划线   
                function onMouseMove(event){  
                    context.lineTo(event.clientX,event.clientY);  
                    context.stroke();     
                }  
                                //在鼠标按键松开后,注销鼠标移动事件  
                canvas.addEventListener("mouseup",function(event){  
                    canvas.removeEventListener("mousemove",onMouseMove,false);  
                },false);  
            }  
        </script>  
    </body>
 </html>



html5之canvas绘图 1.写字板功能

标签:html5   js   canvas   

原文地址:http://blog.csdn.net/li_li_lin/article/details/40536217

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!