html5实现动态画板 Javascript HTML5 Canvas实现的一个画板

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;

}