canvas，中文译为“画布”，html5中新增了5ba626b379994d53f7acf72a64f9b697元素，可以结合javascript动态地在画布中绘制图形。本文我们就和大家分享javascript canvas实现(画笔大小 颜色 橡皮的实例)，具有很好的参考价值，希望对大家有所帮助。
实例如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>
<p>
<!--<input type="button" id="open" value="open"></input>
<input type="button" id= "save" value = "save"></input> <input type="button" id= "color" value="color"></input> -->
<input type="button" value="size"></input>
<input type="text" id="size" onchange="sizechange()"></input>
<input type="button" id="clear" value="clear"></input>
<input type="button" id="eraser" value="eraser" onclick="doeraser()"></input>
<select id = "shape" onchange="shapechange()">
<option value = "99">shape</option>
<option value = "1">rectangle</option>
<option value = "0">circle</option>
<option value = "2">line</option>
</select>
<input id="color" type="color"/>
</p>
<canvas id="mycanvas" style=" border:1px solid;" width="800" height="500"></canvas>
</p>
</body>
<script language="javascript">
var shap = 99; //0 is circle; 1 is rectangle
var orignalx, orignaly;//the coordinate of mouse down
var lastx, lasty;//the coordinate of last mouse position
var ismousedown = false; // flag of mouse pressing down
var mycanvas = document.getelementbyid("mycanvas");
var context = mycanvas.getcontext('2d');
var width = mycanvas.width, height = mycanvas.height;
var data;//storing last canvas' content
context.strokestyle = "black";
context.strokewidth=1;
context.linewidth = 1;
document.getelementbyid('color').onchange = function(){
context.strokestyle = this.value
};
function doeraser(){
context.strokestyle = "white";
shap = 2;
}
function sizechange(){
context.linewidth = parseint(document.getelementbyid('size').value);
}
function shapechange(){
context.strokestyle = "black";
var myselect = document.getelementbyid("shape");
var index=myselect.selectedindex ;
var myvalue = myselect.options[index].value;
var mytext=myselect.options[index].text;
shap = parseint(myvalue);
}
function mycanvasmousedown(event) {
//event.preventdefault();
if(event.button == 0) {
orignalx = event.offsetx;
orignaly = event.offsety;
context.moveto(orignalx,orignaly);
data = context.getimagedata(0, 0, width, height);
ismousedown = true;
}
}
function mycanvasmousemove(event) {
if (ismousedown){
//event.preventdefault();
switch(shap){
case 0:
context.clearrect(0,0,width,height);
context.putimagedata(data,0,0);
lastx = event.offsetx;
lasty = event.offsety;
context.beginpath();
context.arc(orignalx+(lastx-orignalx)/2,orignaly+(lasty-orignaly)/2,math.abs(lastx-orignalx)/2,0,math.pi * 2,true);
context.stroke();
context.closepath();
break;
case 1:
context.clearrect(0,0,width,height);
context.putimagedata(data,0,0);
lastx = event.offsetx;
lasty = event.offsety;
context.strokerect(orignalx, orignaly, lastx-orignalx, lasty-orignaly);
break;
case 2:
lastx = event.offsetx;
lasty = event.offsety;
context.lineto(lastx, lasty); //根据鼠标路径绘画
context.stroke(); //立即渲染
break;
}
}
}
function mycanvasmouseup(event) {
if (ismousedown){
//event.preventdefault();
context.clearrect(0,0,width,height);
context.putimagedata(data,0,0);
lastx = event.offsetx;
lasty = event.offsety;
switch(shap){
case 0:
context.beginpath();
context.arc(orignalx+(lastx-orignalx)/2,orignaly+(lasty-orignaly)/2,math.abs(lastx-orignalx)/2,0,math.pi * 2,true);
context.stroke();
context.closepath();
break;
case 1:
context.beginpath();
context.strokerect(orignalx, orignaly, lastx-orignalx, lasty-orignaly);
context.closepath();
break;
case 2:
context.lineto(lastx, lasty); //根据鼠标路径绘画
context.stroke(); //立即渲染
break;
}
ismousedown = false;
lastx = null;
lasty = null;
orignalx = null;
orignaly = null;
data = context.getimagedata(0, 0, width, height);
context.beginpath();
context.clearrect(0,0,width,height);
context.putimagedata(data,0,0);
context.closepath();
}
}
mycanvas.addeventlistener("mousedown", mycanvasmousedown, false);
mycanvas.addeventlistener("mousemove", mycanvasmousemove, false);
mycanvas.addeventlistener("mouseup", mycanvasmouseup, false);
</script>
</html>
相关推荐：
canvas处理图片的方法
html5里canvas常用的绘图技巧
js+html5使用canvas绘制图片方法详解
以上就是javascript canvas实现画笔大小、颜色、橡皮的实例的详细内容。