& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; div>
& lt; div>
& lt; !——& lt;输入type="按钮" id=翱拧眝alue=" https://www.yisu.com/zixun/open "祝辞& lt;/input>
& lt;输入类型="按钮" id=罢取眝alue=" https://www.yisu.com/zixun/save "祝辞& lt;/input>& lt;输入类型="按钮" id="颜色" value=" https://www.yisu.com/zixun/color "祝辞& lt;/input>——比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/size "祝辞& lt;/input>
& lt;输入类型="文本" id=按笮 弊４? lt;/input>
& lt;输入类型="按钮" id=扒逦奔壑?" https://www.yisu.com/zixun/clear "祝辞& lt;/input>
& lt;输入类型="按钮" id="橡皮" value=" https://www.yisu.com/zixun/eraser "祝辞& lt;/input>
& lt;选择id=靶巫础北?
& lt;选项值=" https://www.yisu.com/zixun/99 "祝辞shape
& lt;选项值=" https://www.yisu.com/zixun/1 "祝辞rectangle
& lt;选项值=" https://www.yisu.com/zixun/0 "祝辞circle
& lt;选项值=" https://www.yisu.com/zixun/2 "祝辞line
& lt;/select>
& lt;输入id="颜色" type="颜色"/比;
& lt;/div>
& lt;帆布id=" myCanvas "宽度=" 800 "高度=" 500 "祝辞& lt;/canvas>
& lt;/div>
& lt;/body>
& lt;脚本语言=癑avaScript”比;
var世鹏科技电子=99;//0是圆的;1是矩形
var orignalX orignalY;//鼠标的坐标
var lastX lastY;//最后一个鼠标的坐标位置
var isMouseDown=false;//鼠标按下旗
var myCanvas=. getelementbyid (“myCanvas”);
var=myCanvas.getContext上下文(2 d);
var=myCanvas宽度。宽度,高度=myCanvas.height;
去年帆布var数据;//存储的内容
上下文。strokeStyle=昂谏?
context.strokeWidth=1;
上下文。线宽=1;
. getelementbyid(的颜色)。onchange=function () {
上下文。strokeStyle=this.value
};
函数doEraser () {
上下文。strokeStyle=鞍住?
世鹏科技电子=2;
}
函数sizeChange () {
上下文。线宽=方法(. getelementbyid(“大小”)value);
}
函数shapeChange () {
上下文。strokeStyle=昂谏?
var myselect=. getelementbyid(“形状”);
var=myselect指数。selectedIndex;
var myvalue=https://www.yisu.com/zixun/myselect.options(指数)value;
var mytext=myselect.options。text(指数);
世鹏科技电子=方法(括号);
}
函数myCanvasMouseDown(事件){//event.preventDefault ();
如果事件。按钮==0){
orignalX=event.offsetX;
orignalY=event.offsetY;
context.moveTo (orignalX orignalY);
data=上下文。getImageData(0, 0,宽度、高度);
isMouseDown=true;
}
}
函数myCanvasMouseMove(事件){
如果(isMouseDown) {//event.preventDefault ();
开关(世鹏科技电子){
例0:
context.clearRect(0, 0,宽度、高度);
context.putImageData(数据,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,数学。π* 2,真实);
context.stroke ();
context.closePath ();
打破;
案例1:
context.clearRect(0, 0,宽度、高度);
context.putImageData(数据,0,0);
lastX=event.offsetX;
lastY=event.offsetY;
上下文。strokeRect (orignalX orignalY、lastX-orignalX lastY-orignalY);
打破;
案例2:
lastX=event.offsetX;
lastY=event.offsetY;
上下文。画线(lastX lastY);//根据鼠标路径绘画
context.stroke ();//立即渲染
打破;
}
}
}
函数myCanvasMouseUp(事件){
如果(isMouseDown) {//event.preventDefault ();
context.clearRect(0, 0,宽度、高度);
context.putImageData(数据,0,0);
lastX=event.offsetX;
lastY=event.offsetY;
开关(世鹏科技电子){
例0:
context.beginPath ();
context.arc (orignalX + (lastX-orignalX)/2, orignalY + (lastY-orignalY)/2, Math.abs (lastX-orignalX)/2, 0,数学。π* 2,真实);
context.stroke ();
context.closePath ();
打破;
案例1:
context.beginPath ();
上下文。strokeRect (orignalX orignalY、lastX-orignalX lastY-orignalY);
context.closePath ();
打破;
案例2:
上下文。画线(lastX lastY);//根据鼠标路径绘画
context.stroke ();//立即渲染
打破;
}
isMouseDown=false;
lastX=零;
lastY=零;
orignalX=零;
orignalY=零;
data=上下文。getImageData(0, 0,宽度、高度);
context.beginPath ();
context.clearRect(0, 0,宽度、高度);
context.putImageData(数据,0,0);
context.closePath ();
}
}
myCanvas。addEventListener (“myCanvasMouseDown mousedown”,假);
myCanvas。addEventListener (“myCanvasMouseMove mousemove”,假);
myCanvas。addEventListener (“myCanvasMouseUp mouseup”,假);
& lt;/script>
& lt;/html>
