jquery canvas网页画布画图

还是以前闲时写的东西

简单的网页绘图，划线，画直线，画框框，画圈，可以改变线的颜色宽度和填充的颜色

可以撤销、恢复、以及清空

主要使用的是canvas

效果如下(视频转的动图，后面有部分没有转出来 TAT )

写的不怎么的，还有些bug，反正没人要求，我自己写的开心写的好玩~诶就是玩~

下附代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">canvas {border: 1px solid #ADADAD;}</style></head><body><div>线宽度:<input type="number" min="0" id="tdlinewidth" value="2"></div><div>线颜色:<input type="color" value="#000000" id="tdfillcolor"></div><div>填充颜色:<input type="color" value="#FF00FF" id="tdcolor"></div><div><input type="radio" name="1" id="defort" value="默认" checked="" />默认<input type="radio" name="1" id="line" value="直线" />直线<input type="radio" name="1" id="ju" value="矩形" />矩形（按住shift画正方形）<input type="radio" name="1" id="yuan" value="椭圆" />圆型（按住shift画正圆）</div><div><button onclick="returnnew(true)">上一步</button><button onclick="huifu()">恢复</button><button onclick="clearcanvas()">清空</button></div><canvas id="mian" width="500" height="500"></canvas><script type="text/javascript">var c = document.getElementById("mian");var ctx = c.getContext("2d");var point = []; //历史记录var nextpoint = []; //恢复记录var nowpoint = {style: "",point: [],linewidth: 10,fillcolor: ""};$("#mian").on('mousedown', function() {var move = true;nextpoint = [];ctx.beginPath();ctx.lineCap = "round";ctx.lineJoin = 'round'; //转折的时候不出现尖角ctx.strokeStyle = $("#tdfillcolor").val();ctx.lineWidth = $("#tdlinewidth").val();if ($("#defort:checked").length == 1) nowpoint = {style: "defort",point: [],linewidth: ctx.lineWidth,fillcolor: ctx.strokeStyle};if ($("#line:checked").length == 1) nowpoint = {style: "line",point: [],linewidth: ctx.lineWidth,fillcolor: ctx.strokeStyle};if ($("#ju:checked").length == 1)nowpoint = {style: "ju",point: [],linewidth: ctx.lineWidth,fillcolor: ctx.strokeStyle,color: $("#tdcolor").val()};if ($("#yuan:checked").length == 1) {nowpoint = {style: "yuan",point: [],linewidth: ctx.lineWidth,fillcolor: ctx.strokeStyle,color: $("#tdcolor").val()};}var uppoint = creadepoint(event.clientX - $(this).offset().left, event.clientY - $(this).offset().top);$("#mian").on('mousemove', function(event1) {if (move) {if (event1.shiftKey == 1) {nowpoint.iszheng = true}else{nowpoint.iszheng = false;}uppoint = creadepoint(event1.clientX - $(this).offset().left, event1.clientY - $(this).offset().top);}})var add = false;$("#mian").on('mouseout', function() {move = false;ctx.stroke();if (!add) {point.push(nowpoint);add = true;}})$("#mian").on('mouseup', function() {move = false;ctx.stroke();if (!add) {point.push(nowpoint);add = true;}})})//创建var creadepoint = function(x, y) {if ($("#defort:checked").length == 1) {ctx.lineTo(x, y);ctx.stroke();nowpoint.point.push([x, y]);}if ($("#line:checked").length == 1) {returnnew();if (nowpoint.point.length != 0) {ctx.moveTo(nowpoint.point[0][0], nowpoint.point[0][1]);ctx.lineTo(x, y);ctx.stroke();}nowpoint.point.push([x, y]);}if ($("#ju:checked").length == 1) {returnnew();if (nowpoint.point.length != 0) {ctx.fillStyle = $("#tdcolor").val();if (nowpoint.iszheng != true) {ctx.fillRect(nowpoint.point[0][0], nowpoint.point[0][1], x - nowpoint.point[0][0], y - nowpoint.point[0][1]);ctx.rect(nowpoint.point[0][0], nowpoint.point[0][1], x - nowpoint.point[0][0], y - nowpoint.point[0][1]);} else {ctx.fillRect(nowpoint.point[0][0], nowpoint.point[0][1], x - nowpoint.point[0][0], x - nowpoint.point[0][0]);ctx.rect(nowpoint.point[0][0], nowpoint.point[0][1], x - nowpoint.point[0][0], x - nowpoint.point[0][0]);}nowpoint.point[1] = [x, y];} else nowpoint.point[0] = [x, y];}if ($("#yuan:checked").length == 1) {returnnew();if (nowpoint.point.length != 0) {ctx.fillStyle = $("#tdcolor").val();if (nowpoint.iszheng != true) {ctx.moveTo(nowpoint.point[0][0] + Math.abs(x - nowpoint.point[0][0]), nowpoint.point[0][1]) + Math.abs(y -nowpoint.point[0][0]);ctx.ellipse(nowpoint.point[0][0], nowpoint.point[0][1], Math.abs(x - nowpoint.point[0][0]),Math.abs(y - nowpoint.point[0][1]), 0, 0, Math.PI * 2);ctx.fill();} else {ctx.moveTo(nowpoint.point[0][0] + Math.abs(x - nowpoint.point[0][0]), nowpoint.point[0][1]) + Math.abs(x -nowpoint.point[0][0]);ctx.ellipse(nowpoint.point[0][0], nowpoint.point[0][1], Math.abs(x - nowpoint.point[0][0]),Math.abs(x - nowpoint.point[0][0]), 0, 0, Math.PI * 2);ctx.fill();}nowpoint.point[1] = [x, y];} else nowpoint.point[0] = [x, y];}return [x, y];}//恢复var huifu = function() {if (nextpoint.length == 0) return;var e = nextpoint[nextpoint.length - 1];var fristline = $("#tdlinewidth").val();var fristfill = $("#tdfillcolor").val();ctx.beginPath();ctx.lineCap = "round";ctx.lineJoin = 'round';ctx.strokeStyle = $("#tdfillcolor").val(e.fillcolor).val();ctx.lineWidth = $("#tdlinewidth").val(e.linewidth).val();if (e.style == "defort") {$.each(e.point, function(j, p) {ctx.lineTo(p[0], p[1]);ctx.stroke();})}if (e.style == "line") {ctx.moveTo(e.point[0][0], e.point[0][1]);ctx.lineTo(e.point[e.point.length - 1][0], e.point[e.point.length - 1][1]);ctx.stroke();}if (e.style == "ju") {var fristclor = $("#tdcolor").val();ctx.fillStyle = $("#tdcolor").val(e.color).val();if (e.iszheng != true) {ctx.fillRect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][1] - e.point[0][1]);ctx.rect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][1] - e.point[0][1]);} else {ctx.fillRect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][0] - e.point[0][0]);ctx.rect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][0] - e.point[0][0]);}ctx.stroke();$("#tdcolor").val(fristclor);}if (e.style == "yuan") {var fristclor = $("#tdcolor").val();ctx.fillStyle = $("#tdcolor").val(e.color).val();if (e.iszheng != true) {ctx.ellipse(e.point[0][0], e.point[0][1], Math.abs(e.point[1][0] - e.point[0][0]),Math.abs(e.point[1][1] - e.point[0][1]), 0, 0, Math.PI * 2);ctx.fill();} else {ctx.ellipse(e.point[0][0], e.point[0][1], Math.abs(e.point[1][0] - e.point[0][0]),Math.abs(e.point[1][0] - e.point[0][0]), 0, 0, Math.PI * 2);ctx.fill();}ctx.stroke();$("#tdcolor").val(fristclor);}point.push(e);nextpoint.length = nextpoint.length - 1;$("#tdlinewidth").val(fristline);$("#tdfillcolor").val(fristfill);}//撤销var returnnew = function(ret) {c.width = c.width;var fristline = $("#tdlinewidth").val();var fristfill = $("#tdfillcolor").val();$.each(point, function(i, e) {//撤销上一步  记录在恢复里面if (ret && i == (point.length - 1)) {nextpoint.push(e);point.length = point.length - 1;} else {ctx.beginPath();ctx.lineCap = "round";ctx.lineJoin = 'round';ctx.strokeStyle = $("#tdfillcolor").val(e.fillcolor).val();ctx.lineWidth = $("#tdlinewidth").val(e.linewidth).val();if (e.style == "defort") {$.each(e.point, function(j, p) {ctx.lineTo(p[0], p[1]);ctx.stroke();})}if (e.style == "line") {ctx.moveTo(e.point[0][0], e.point[0][1]);ctx.lineTo(e.point[e.point.length - 1][0], e.point[e.point.length - 1][1]);ctx.stroke();}if (e.style == "ju") {var fristclor = $("#tdcolor").val();ctx.fillStyle = $("#tdcolor").val(e.color).val();if (e.iszheng != true) {ctx.fillRect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][1] - e.point[0][1]);ctx.rect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][1] - e.point[0][1]);} else {ctx.fillRect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][0] - e.point[0][0]);ctx.rect(e.point[0][0], e.point[0][1], e.point[1][0] - e.point[0][0], e.point[1][0] - e.point[0][0]);}ctx.stroke();$("#tdcolor").val(fristclor);}if (e.style == "yuan") {var fristclor = $("#tdcolor").val();ctx.fillStyle = $("#tdcolor").val(e.color).val();if (e.iszheng != true) {ctx.ellipse(e.point[0][0], e.point[0][1], Math.abs(e.point[1][0] - e.point[0][0]),Math.abs(e.point[1][1] - e.point[0][1]), 0, 0, Math.PI * 2);ctx.fill();} else {ctx.ellipse(e.point[0][0], e.point[0][1], Math.abs(e.point[1][0] - e.point[0][0]),Math.abs(e.point[1][0] - e.point[0][0]), 0, 0, Math.PI * 2);ctx.fill();}ctx.stroke();$("#tdcolor").val(fristclor);}}})$("#tdlinewidth").val(fristline);$("#tdfillcolor").val(fristfill);}var clearcanvas = function() {c.width = c.width;point = []; //上一步记录nextpoint = []; //恢复}</script></body>
</html>

jquery canvas网页画布画图相关推荐

【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
使用jquery—Canvas实现html5小游戏——《坦克大战》
目录 1.项目背景 2.项目展示 3.设计思路 3.1.坦克移动 3.2.坦克开火 3.3.击中坦克 4.实现代码 5.总结 1.项目背景 2021年春节期间在家无聊,正好又学过一些前端的知识,因此就 ...
HTML5 2D游戏引擎研发系列第四章 Canvas技术篇-画布技术-基于手动切片动画
作者:HTML5游戏开发者社区-白泽转载请注明出处:http://html5gamedev.or HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画&g ...
Canvas网页涂鸦板再次增强版
目录第一版Canvas涂鸦板第二版Canvas涂鸦板第三版Canvas涂鸦板体验涂鸦板第一版Canvas涂鸦板实现功能:在涂鸦板上鼠标按下去拖动的涂鸦效果实现思路:监听鼠标按下.移动.松 ...
酷！使用 jQuery Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结
[魅族Pro7]--BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式 ...
Canvas（画布）、Paint（画笔）详解
一.自定义控件分类: 1.组合控件:将系统原生控件组合起来,加上动画效果,形成一种特殊的UI效果 2.纯粹自定义控件:继承自系统的View,自己去实现view效果二.Canvas(画布).Paint ...
ML：MLOps系列讲解之《MLOps Stack Canvas堆栈画布之MLOps Stack CanvasCRISP-ML(Q)》解读
ML:MLOps系列讲解之<MLOps Stack Canvas堆栈画布之MLOps Stack Canvas&CRISP-ML(Q)>解读目录 MLOps系列讲解之<ML ...
ML：MLOps系列讲解之《MLOps Stack Canvas堆栈画布》解读
ML:MLOps系列讲解之<MLOps Stack Canvas堆栈画布>解读目录 MLOps系列讲解之<MLOps Stack Canvas堆栈画布>解读 7.MLOps ...

jquery canvas网页画布画图

jquery canvas网页画布画图相关推荐

最新文章

热门文章