html5之绘图板

你的名字 2022-03-18 10:06 186阅读 0赞

<DOCTYPE html>
    <html>
    <head>
    <title>canvas简单画板</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
       var canvas = $('#myCanvas')[0];
       var myCanvas=canvas.getContext("2d");
       myCanvas.strokeStyle="red";  
       myCanvas.lineWidth=2;
       var flag = false;
       
      //鼠标按下事件，准备绘图
      $('#myCanvas').mousedown(function(e){
        flag = true;
    	var mouseX = e.pageX - this.offsetLeft;
    	var mouseY = e.pageY - this.offsetTop;
    	myCanvas.moveTo(mouseX,mouseY);  
      
      });
      //鼠标按键松开事件，绘图结束
      $('#myCanvas').mouseup(function(e){
       flag = false;
      });
      //鼠标移动事件，开始绘图
      $('#myCanvas').mousemove(function(e){
    	var mouseX = e.pageX - this.offsetLeft;
    	var mouseY = e.pageY - this.offsetTop;
    	if(flag){
    	  myCanvas.lineTo(mouseX+4,mouseY+4);
    	  myCanvas.stroke();
    	}
      });
    });
    </script>
    <head>
    绘图板<br>
    <canvas id="myCanvas" width="900" height="600" style="border:1px solid #FCF">
    你的浏览器不支持HTML5
    </canvas>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关利用canvas开发一个绘图板

【底部附有制作绘图板完整代码】编码过程中会遇到一些原生js的技术，小编会先罗列出来。 1、在for循环中为多个元素利用索引值绑定事件，会产生异步问题。问题所在：

拼搏现实的明天。/ 2022年12月09日 04:53/ 0 赞/ 164 阅读

相关 Canvas 学习（时钟绘图板）

canvas画圆为什么需要用canvas，如果用`onmousemove`，每一次移动都会进行DOM重绘，非常消耗性能，这时我们需要看一下 canvas

怼烎@/ 2022年10月15日 04:00/ 0 赞/ 226 阅读

相关 Html5之基础-4 HTML文本

一、HTML 文本标记概述文本标记的作用（1）文本是网页上的重要组成部分（2）直接书写的文本会用浏览器默认的样式显示（3）包含在标记中的文本则会

╰+攻爆jí腚メ/ 2022年10月02日 13:51/ 0 赞/ 153 阅读

相关 html5之SVG

html之SVG -------------------- whit’s is the SVG？ SVG stands fo

末蓝、/ 2022年07月16日 04:14/ 0 赞/ 263 阅读

相关前端面试题之HTML/HTML5

HTML部分 > （1）谈谈你对Web标准的理解。 > WEB标准不是某一个标准，而是一系列标准的组合。 > 网页主要由三部分组成； > 1>结构（Struct

忘是亡心i/ 2022年06月03日 03:28/ 0 赞/ 258 阅读

相关手机端绘图板制作

实现套路：利用canvas的api,绘制图片，将canvas图片转成base64 保存在后台。后台将base64转换为png格式。前端请求就可看到显示的图片了。效果图1：

悠悠/ 2022年05月30日 09:56/ 0 赞/ 210 阅读

相关 html5之绘图板

<DOCTYPE html> <html> <head> <title>canvas简单画板</title> <script src="

你的名字/ 2022年03月18日 10:06/ 0 赞/ 187 阅读

相关 HTML5 之 notifications

<!DOCTYPE HTML> <html> <head <meta charset="gbk"> <title>HTML5 之 n

短命女/ 2022年03月17日 11:20/ 0 赞/ 180 阅读

相关 Html5 之 Google地图

<!DOCTYPE html> <html> <body> <p id="demo">显示地图</p> <button οnclick=

秒速五厘米/ 2022年03月17日 10:48/ 0 赞/ 518 阅读

相关 html5之video

<video id="myVideo" controls poster="video.jpg" width="600" height="400" > <

Bertha 。/ 2021年06月24日 14:34/ 0 赞/ 544 阅读