canvas教程

wishyouhappy

字号+ 作者:H5之家 来源:H5之家 2015-10-28 15:20 我要评论( )

前几天在canvas——画板中做了个很简陋的画板,只能画简单的线条,可以选择颜色和线条粗度,今天在此简陋的画板上增加了新的形状,撤销,保存,橡皮擦等功能,虽

前几天在

2、主要鼠标事件:

(mouseState === radius = Math.sqrt((oldX - newX) *(oldX - newX)+ (oldY - newY) * (oldY -ctxTemp.arc(newX,newY,10 ,0, Math.PI * 2,= 0ctx.fillStyle = "white"oldX = 0colorDiv = document.getElementById("color"document.getElementById("blackBtn").click(); chosen = parentNode =init = canvas = document.getElementById("canvas"(!canvas || != canvas.getContext("2d"ctx.fillStyle = "white"canvasTemp = document.getElementById("canvasTemp"document.getElementById("undoImage").src="./images/undoDis.png"drawPicture = down, move, chosen, = = event ||ctx.fillStyle = "white"mouseState = image = (type !== "rubber"= shape = document.getElementById("shape"(type !== "rubber"move = newX = event.clientX -(type === "pencil"=(type === "rec"- 10 ,newY - 10(type === "line"(type === "circle"radius = Math.sqrt((oldX - newX) *(oldX - newX)+ (oldY - newY) * (oldY -ctxTemp.arc(newX,newY,10 ,0, Math.PI * 2,(type === "roundRec"+20,oldY, newX+20, oldY+20, 20ctxTemp.moveTo(newX - 10 ,newY - 10(type === "rubber"='#000000'ctx.fillStyle = "white"0,0'mousedown'= 0exportImage = imgSrc = canvas.toDataURL("image/png"undo = (cancelTimes >= imageHistoryList.length+1(cancelTimes =="redoImage").src="./images/redo.png"= imageHistoryList[imageHistoryList.length-1-redo = (cancelTimes < 0(cancelTimes == 0= imageHistoryList[imageHistoryList.length-1-0, 00"load",f,"onload"= true; });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评