我要评论实例如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<div>
<!--<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"/>
</div>
<canvas id="mycanvas" style=" border:1px solid;" width="800" height="500"></canvas>
</div>
</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>
以上这篇javascript canvas实现(画笔大小 颜色 橡皮的实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论