canvas做一个绘画板

  • 时间:
  • 分类: js,HTML5

绘画板就是能在这个画布上随便画，这里要用到鼠标的拖拽移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    
    var oGC = oC.getContext('2d');  
    
    oC.onmousedown = function(ev){
        var ev = ev || window.event;
        oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);//开始移动的坐标
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);//移动后的坐标
            oGC.stroke();//画线
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
    
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>

标签: 无

发表评论：

whatsapp营销