H5中canvas标签制作在线画板

1.介绍

　　左键点击下移动开始画图。放开鼠标不在画图。

2.重要使用理论

query的使用：

　　鼠标的按下mousedown

　　鼠标的移动mousemove

　　鼠标的放开 mouseup

3.程序

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8" />
 4     <title>draw board</title>
 5     <script src="D:\jquery\jquery-1.12.4.min.js"></script>
 6     <style type="text/css">
 7         #board{border:2px solid:#f00;}
 8     </style>
 9 </head>
10 <body>
11     <canvas id="board" width="300" height="300"></canvas>
12     <br/>
13     <script type="text/javascript">
14         var canvas=document.getElementById('board');
15         var board=canvas.getContext("2d");
16             board.lineWidth=5;
17             board.strokeStyle="blue";
18         var paint=false;
19
20         //mousedown
21         $("#board").mousedown(function(e){
22             var mouseX=e.pageX-this.offsetLeft;
23             var mouseY=e.pageY-this.offsetTop;
24             paint=true;    //true
25             board.moveTo(mouseX,mouseY);
26         });
27
28         //mouseup
29         $("#board").mouseup(function(e){
30             paint=false;
31         });
32
33         //mousemove
34         $("#board").mousemove(function(e){
35             var mouseX=e.pageX-this.offsetLeft;
36             var mouseY=e.pageY-this.offsetTop;
37             if(paint){
38                 board.lineTo(mouseX,mouseY);
39                 board.stroke();
40             }
41         });
42
43
44     </script>
45     <h2>哈哈哈哈</h2>
46 </body>
47 </html>

4.运行结果图

H5中canvas标签制作在线画板相关推荐

html 重置画布坐标系,H5中canvas的坐标系（画布初始）
canvas画布的坐标系 canvas画布是通过HTML的标签嵌入到web页面中的,它支持通过CSS结构来设置canvas的一些样式.比如通过style来设置canvas的width,height.这 ...
使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
【微信小程序】使用canvas制作在线画板，清除与保存
参考:微信小程序实现在线画板https://blog.csdn.net/IT_czh/article/details/84623110 wxml  < ...
canvas制作在线画板
上效果图 <template><canvas ref="canvas" class="canvas" width="800" ...
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以".svg"为后缀的文件在浏览器中打开显 ...
html5video标签属性,H5中video标签那些属性和方法
前言最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src:视频的U ...
vue移动端h5中a标签下载/预览文件
需求:项目分PC端和移动端,PC端(react)以实现列表页附件下载,现需同步移动端(vue)h5页面在原有的列表页中增加一行查看(下载)附件. 只写结构,暂不考虑其他,增加附件行的代码如下: < ...
h5使用canvas模拟制作的中国象棋实现残局走子
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta http-e ...
h5中table标签的使用
table标签是用来显示表格的标签 table标签的大致格式如下 <table><tr><td></td></tr> </table& ...

H5中canvas标签制作在线画板

H5中canvas标签制作在线画板相关推荐

最新文章

热门文章