canvas js 绘图插件_canvas写字板

最新推荐文章于 2024-03-26 16:54:07 发布

weixin_39604897

最新推荐文章于 2024-03-26 16:54:07 发布

阅读量726

点赞数

文章标签： canvas js 绘图插件

三人之一

预计阅读6分钟

正文共2140字，5图

失踪人口回归。

这学期实在是太忙了，

所以就没有更新，

现在放暑假啦，

neutrino就有来啦！

今天给大家分享一个好玩的东西，

用canvas写一个简单写字板

实现用鼠标在屏幕上写字

html文件

<html>  <head>    <meta charset="utf-8" />    <title>canvas写字板title>    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>    <script src="js/canvas.js" type="text/javascript">script>    <style>      #myCanvas {        background-color: black;        border-radius: 5px;        position: absolute;        margin-left: 402px;        opacity: 0.5;      }style>  head>  <body>    <canvas id="myCanvas" width='1000' height='500'>canvas>    <button id="clearCanvas" style="position: absolute;margin-left: 200px;">清空画布button>  body>html>

js文件

$(document).ready(function(){var myContext = document.getElementById('myCanvas').getContext('2d');//返回绘图环境，即二维绘图      var myClickX = new Array();//存放x坐标      var myClickY = new Array();//存放y坐标      var myClickDrag = new Array();//      var myPaint;//定义一个参数，判断画板状态              function addClick(x,y,dragging){        myClickX.push(x);//存放x坐标        myClickY.push(y);//存放y坐标        myClickDrag.push(dragging);//状态      }    //写字      function redraw(){        myContext.strokeStyle = 'green';//画笔颜色         myContext.lineJoin = 'round';//笔尖样式        myContext.lineWidth = 5;//画笔粗细        for(var i=0;i          myContext.beginPath();//beginPath() 方法开始一条路径，或重置当前的路径。          if(myClickDrag[i] && i){            myContext.moveTo(myClickX[i-1], myClickY[i-1])//moveTo() 方法把路径移动到画布中的指定点，不创建线条。          }else{            myContext.moveTo(myClickX[i]-1,myClickY[i])          }          myContext.lineTo(myClickX[i],myClickY[i]);//lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。          myContext.closePath();//closePath() 方法创建从当前点到开始点的路径。          myContext.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。        }      }          $('#myCanvas').mousedown(function(e){        myPaint = true;//正在画        addClick(e.pageX-this.offsetLeft,e.pageY - this.offsetTop);        redraw();      })          $('#myCanvas').mousemove(function(e){        if(myPaint){//判断状态          addClick(e.pageX-this.offsetLeft,e.pageY - this.offsetTop,true);        }        redraw();      })      $("#myCanvas").mouseup(function(){        myPaint = false;//没有操作      })    //橡皮檫      $('#clearCanvas').click(function(){        myContext.fillStyle='black';   //设置背景颜色        myContext.fillRect(0,0,1000,500) //绘制背景矩形,无填充颜色        myClickX=[];        myClickY=[];        myClickDrag=[];      })      })

ok,完成啦！

效果视频

白白咯

三人之一

围观

透明度属性，阴影属性

丨更多

热文

python04

丨更多

热文

jquery注册页面

丨更多

热文

鼠标事件+复选框

丨更多

热文

jQuery之简易qq聊天页面

丨更多

小编：neutrino

代码：aquarius

视频剪辑：简单一个人

图文样式：壹伴

weixin_39604897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas js 绘图插件_canvas写字板

三人之一预计阅读6分钟正文共2140字，5图失踪人口回归。这学期实在是太忙了，所以就没有更新，现在放暑假啦，neutrino就有来啦！今天给大家分享一个好玩的东西，用canvas写一个简单写字板实现用鼠标在屏幕上写字html文件<html> <head> <meta charset="utf-8" /> <title>canv...
复制链接

扫一扫