有网站前台如何做后台,两个人做类似的梦 网站,响应式网站建设原则,程序员40岁以后出路canvas是一个就基于像素的画图h5元素。 利用canvas做一个如下描述所示的动态图形#xff1a;当鼠标点下去时开始绘图#xff0c;在鼠标结束时完成一个矩形#xff0c;当再一次点击时重复第一次的绘图步骤。 1 !DOCTYPE html2 html3 head4 … canvas是一个就基于像素的画图h5元素。 利用canvas做一个如下描述所示的动态图形当鼠标点下去时开始绘图在鼠标结束时完成一个矩形当再一次点击时重复第一次的绘图步骤。 1 !DOCTYPE html2 html3 head4 meta charsetUTF-85 title/title6 style typetext/css7 canvas{8 border: 1px solid #000;9 }
10 /style
11 /head
12 body
13 canvas idcanvas width400 height400/canvas
14 script typetext/javascript
15 var canvas document.getElementById(canvas);
16 var context canvas.getContext(2d);
17 // 当鼠标点击时执行的函数
18 canvas.οnmοusedοwn(){
19 // 得到鼠标在canvas上的位置
20 var x event.clientX - canvas.offsetLeft;
21 var y event.clientY - canvas.offsetTop;
22 var x1 0;
23 var y1 0;
24 // 当鼠标移动时
25 document.onmousemove () {
26 // 清除原来的矩形
27 context.clearRect(0,0,canvas.width,canvas.height);
28 // 得到鼠标绘制结束时矩形的位置
29 x1 event.clientX - canvas.offsetLeft;
30 y1 event.clientY - canvas.offsetTop;
31 // 鼠标完成绘制时的矩形的宽和高
32 context.strokeRect(x,y,(x1-x),(y1-y));
33 }
34 // 鼠标离开后
35 document.onmouseup (){
36 document.onmousemove null;
37 document.ommousedown null;
38 }
39 }
40 /script
41 /body
42 /html 效果图可在规定的矩形内绘制任何宽高的矩形 转载于:https://www.cnblogs.com/flyingLcode/p/7731908.html
