爱站网长尾关键词挖掘工具下载,知名的饰品行业网站开发,微网站如何做推广方案设计,怎么进网站后台管理系统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
