TaoBye

Html5 canvas 简单画布画板例子源码

直接复制到编译器上面运行！
<html> 
 <head> 
  <title>淘拜网</title> 
  </head> 
 <body> 
<canvas width="800" height="450" style="border:1px solid black"></canvas> 
<div id="info">-</div>
<script> 
 var canvas = document.getElementsByTagName('canvas')[0]; 
 canvas.addEventListener('mousemove', onMouseMove, false); 
 canvas.addEventListener('mousedown', onMouseDown, false); 
 canvas.addEventListener('mouseup', onMouseUp, false); 
   
 var info = document.getElementById('info');
 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); 
             } 
       } 
   
       huehue = hue + 10 * Math.random(); 
       context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; 
       context.shadowColor = 'red'; 
       context.shadowBlur = 1; 
       context.stroke(); 
       context.restore(); 
    } 
  info.firstChild.nodeValue ='x = ' + evt.layerX + ' y = ' + evt.layerY;
 } 
 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> 
</body> 
</html>
阅读：4463   发布：2017-08-31 16:39:38
正在加载评论...