六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

canvas实现在线手写绘制画图

Admin | 2016-8-5 16:38:03 | ReadNums | 1357 | 标签 网页制作 | 打印本页
     

  一、网页控件

  <canvas width="800" height="600"></canvas>

  二、JS代码

  <script>  
 var canvas = document.getElementsByTagName('canvas')[0];  
 canvas.addEventListener('mousemove', onMouseMove, false);  
 canvas.addEventListener('mousedown', onMouseDown, false);  
 canvas.addEventListener('mouseup', onMouseUp, false);  
 
 var context = canvas.getContext('2d');  
 var linex = new Array();  
 var liney = new Array();  
 var linen = new Array();  
 
 var lastX = -1;  
 var lastY = -1;  
 var hue = 0;  
 var flag = 0;  
 
 function onMouseMove(evt) {  
    if (flag == 1) {  
       linex.push(evt.layerX);  
       liney.push(evt.layerY);  
       linen.push(1);  
       context.save();  
       context.translate(context.canvas.width/2, context.canvas.height/2);  
       context.translate(-context.canvas.width/2, -context.canvas.height/2);  
       context.beginPath();  
       context.lineWidth = 5 + Math.random() * 10;  
 
       for (var i=1;i<linex.length;i++) {  
             lastX = linex[i];  
             lastY = liney[i];  
             if (linen[i] == 0) {  
                context.moveTo(lastX,lastY);  
             } else {  
                context.lineTo(lastX,lastY);  
             }  
       }  
 
       hue = hue + 10 * Math.random();  
       context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';  
       context.shadowColor = 'white';  
       context.shadowBlur = 10;  
       context.stroke();  
       context.restore();  
    }  
 }  
 function onMouseDown(evt) {  
    flag = 1;  
    linex.push(evt.layerX);  
    liney.push(evt.layerY);  
    linen.push(0);  
 }  
 function onMouseUp(evt) {  
    flag = 0;  
     linex.push(evt.layerX);  
     liney.push(evt.layerY);  
    linen.push(0);  
 }  
</script>


问题未解决:在线咨询我要在线咨询问题

香港有线新闻台app

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日