doMouseUp, <强>
另外一种方式在JavaScript中称为反模式:
/bbox.width)
<强>
“代码”类var tempContext=零;//全局变量2 d上下文var=false开始;var mText_canvas=零;var x=0, y=0;窗口。添加窗口。onload=function () {var帆布=. getelementbyid (“event_canvas");console.log (canvas.parentNode.clientWidth);画布。宽度=canvas.parentNode.clientWidth;画布。身高=canvas.parentNode.clientHeight;如果(! canvas.getContext) {console.log(“帆布不支持。请安装一个兼容HTML5浏览器!”);返回;}//2 d的背景画布,画rectangel tempContext=canvas.getContext (“2 d");tempContext.fillStyle=癰lue";x=canvas.width/2;y=canvas.height/2;tempContext。80年fillRect (x, y, 40);//关键事件——使用DOM元素作为画布对象。addEventListener (keydown, doKeyDown,真实);canvas.focus ();//关键事件——使用窗口对象窗口。addEventListener (keydown, doKeyDown,真实);//鼠标事件canvas.addEventListener (“mousedown" doMouseDown,假);画布。addEventListener (mousemove, doMouseMove、虚假);画布。addEventListener (mouseup, doMouseUp、虚假);}函数getPointOnCanvas(画布,x, y) {var bbox=canvas.getBoundingClientRect ();{:x - bbox返回。左*(画布。宽/bbox.width), y, y - bbox。*(画布。高度/bbox.height)};}函数doKeyDown (e) {var keyID=e。键码?e。键码:e.which;如果38 (keyID===| | keyID===87){//向上箭头和W clearCanvas ();y=y - 10;tempContext。80年fillRect (x, y, 40);e.preventDefault ();}如果(keyID===39 | | keyID===68){//右箭头和D clearCanvas ();x=x + 10;tempContext。80年fillRect (x, y, 40);e.preventDefault ();}如果40 (keyID===| | keyID===83){//向下箭头和S clearCanvas ();y=y + 10;tempContext。80年fillRect (x, y, 40);e.preventDefault ();}如果37 (keyID===| | keyID===65){//左箭头和clearCanvas ();x=x - 10;tempContext。80年fillRect (x, y, 40);e.preventDefault ();}}函数clearCanvas () {tempContext。clearRect(0, 0, 500, 500)}函数doMouseDown(事件){var x=event.pageX;var y=event.pageY;画布var=event.target;var loc=getPointOnCanvas(画布,x, y);console.log(“鼠标在点(x:“;+疯狂的。x +“y:“;+疯狂的。y +“)“);tempContext.beginPath ();tempContext.moveTo (loc)。x, loc.y);开始=true;}函数doMouseMove(事件){var x=event.pageX;var y=event.pageY;画布var=event.target;var loc=getPointOnCanvas(画布,x, y);如果(开始){tempContext.lineTo (loc)。x, loc.y);tempContext.stroke ();}}函数doMouseUp(事件){console.log(“鼠标now");如果(开始){doMouseMove(事件);开始=false;}} HTML部分:
