html5js做画板背景颜色,js和html5实现画板

html5新添了一个重要又强大的标签元素,该标签真有彻底替换掉flash的尽头，现在很多网页游戏就是用完成的，下面代码就是用该标签制作的一个画板。

效果图：

#canvas{cursor:crosshair;}

#red{background:red; width:30px;height: 27px}

#blue{background:blue; width:30px;height: 27px}

#yellow{background:yellow; width:30px;height: 27px}

#white{background:white; width:30px;height: 27px}

#zi{background:#8B026B; width:30px;height: 27px}

画笔颜色：

画笔宽度：

4

8

16

30

function change(){

document.getElementById("image").src=canvas.toDataURL("image/jpg");

//window.open("demo.htm", "height=100px, width=400px");

//alert(document.getElementById("image"));

}

//下拉画笔宽度

window.οnlοad=function(){

var huabi=document.getElementById("sel");

huabi.οnchange=function(){

linw=huabi.value;

};

//linw=huabi;

};

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

//画一个黑色矩形

ctx.fillStyle="#002200";

ctx.fillRect(0,0,600,400);

//按下标记

var onoff=false;

var oldx=-10;

var oldy=-10;

//设置颜色默认为白色

var linecolor="white";

//宽度默认为4

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;

}

}