HTML5Canvas实现的一个画板

可通过按钮改变画笔的颜色及大小，还可将画布保存为图片在下面进行显示。

 
 
 
     
     DEMO6：自定义画板 
 
 
 
    浏览器不支持canvas    
 
 
 YELLOW 
 RED 
 BLUE 
 GREEN 
 WHITE 
 BLACK 
 
 
 4PX 
 8PX 
 16PX 
 
 
 EXPORT 
 
 
 
 
 
 
    var canvas = document.getElementById('canvas');  //获取标签
    var ctx = canvas.getContext("2d");  
 
    var fillStyle = "black";
    ctx.fillRect(0,0,600,300);
    var onoff = false;  //按下标记
    var oldx = -10;
    var oldy = -10;
    //设置颜色
    var linecolor = "white";
    var linw = 4;
    canvas.addEventListener("mousemove",draw,true);  //鼠标移动事件
    canvas.addEventListener("mousedown",down,false);  //鼠标按下事件
    canvas.addEventListener("mouseup",up,false);  //鼠标弹起事件
    function down(event){
        onoff = true;
        oldx = event.pageX - 10;
        oldy = event.pageY - 10;
    }
    function up(){
        onoff = false;
    }
    function draw(event){
        if (onoff==true) {
            var newx = event.pageX - 10;
            var newy = event.pageY - 10
            ctx.beginPath();
            ctx.moveTo(oldx,oldy);
            ctx.lineTo(newx,newy);
            ctx.strokeStyle = linecolor;
            ctx.lineWidth = linw;
            ctx.lineCap = "round";
            ctx.stroke();
 
            oldx = newx;
            oldy = newy;
        }
    }
    function copyimage(event)
    {
        var img_png_src = canvas.toDataURL("image/png");  //将画板保存为图片格式的函数
        document.getElementById("image_png").src = img_png_src;
    }
     
      
 
  

查看更多关于HTML5Canvas实现的一个画板的详细内容...