jquery canvas网页画布画图

已于 2022-09-21 10:20:34 修改
阅读量1.5k 收藏 4
点赞数 2
分类专栏： html+js+css 文章标签： canvas javascript html
于 2021-06-16 16:03:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40907356/article/details/117959863
版权

还是以前闲时写的东西

 

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

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

主要使用的是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>

唔无误
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5福利篇--使用Canvas画图
小马哥的博客
09-22 2297
浏览器不支持
基于HTML5 Canvas和jQuery 的画图工具的实现
08-13
基于HTML5 Canvas和jQuery 的画图工具的实现 参考博文： http://blog.csdn.net/luanlouis/article/details/38490589
Jquery制作图片验证码实例-canvas 绘制
weixin_30437337的博客
02-15 276
CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px; height: 40px; margin: -21px 0 0 0; } HTML <span id="code" class="identify-code...
探索HTML Canvas：创意绘图与网页美化（秒懂网页Canvas绘图）
最新发布
百赢出品，必属精品
04-08 1087
canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。Canvas是HTML5提供的一个元素，用于通过JavaScript绘制图形。绘制图形：Canvas可以绘制各种形状、线条、文本和图像，使开发者能够灵活地创建图形效果。动态更新：Canvas提供了API，开发者可以通过JavaScript动态更新画布上的图形，实现实时的数据可视化和动画效果。高性能。
JQ与Canvas
heartOfblack 离开了电脑，我不希望我还有病
09-22 2452
虽然经常用JQ，但是对这个框架都没有深入学习，很多细节都不清楚，此次遇到的问题就是JQ选择canvas标签出现的。。。我很好奇为什么我现在才遇到这个，我是怎么过来的 如果直接使用  JQ的ID选择器，发现提示错误 如：var c=$("#mycanvas"); c.getContext('2d'); 提示："Uncaught TypeError: undefined
HTML5 canvas画图并保存成图片的jcanvas插件
09-28
在这个示例中，我们使用了一个名为jcanvas的JavaScript库来增强canvas的功能，使其能够支持用户交互式的画图，并且能够将画布上的内容保存为图片。 jcanvas是一个强大的jQuery插件，它提供了大量的API方法，简化了...
DrawingApp:带有jQuery和Canvas的简单绘图应用程序
05-16
DrawingApp就是一个典型的例子，它巧妙地结合了jQuery的易用性和Canvas的画布功能，创建了一个简单的在线绘图应用程序。本文将深入探讨DrawingApp的设计原理、实现机制以及相关的技术要点。 一、jQuery与...
jquery+html5烂漫爱心表白动画代码分享
10-23
【jQuery + HTML5浪漫爱心表白动画】是一种利用JavaScript库jQuery和HTML5的Canvas元素创建的互动动画效果，常用于制作富有创意的表白场景。在HTML5的Canvas上，可以通过JavaScript绘制图形并添加动画效果，使得爱心...
HTML5 canvas写字板涂鸦画板特效代码
03-20
HTML5的canvas元素是Web开发中的一个强大工具，它提供了在网页上进行动态图形绘制的能力。这个"HTML5 canvas写字板涂鸦画板特效代码"是一个利用canvas实现的交互式绘图应用，允许用户在网页上进行自由绘画，并提供了...
jq将html转换成图片,可将canvas图像导出为多种格式图片的jQuery插件
weixin_42530793的博客
06-01 669
ExportCanvas是一款非常实用的可将canvas图像导出为多种格式图片的jQuery插件。该canvas图像导出插件使用浏览器的下载功能将canvas中的图像下载到本地，你可以指定多种类型的图片格式：PNG，JPEG，GIF，BMP，WEBP。使用方法在页面中引入jQuery和export-canvas.js文件。导出图片按照下面的格式编写js代码，即可将canvas中的图像通过浏览器下载...
jquery动态绘图（各种绘图）
05-22
让绘图变得简单 而且绘图类型丰富多彩 里面事例很多 总有一种适合你 操作也比较简单
html canvas点击事件,jquery – 图像单击HTML5 Canvas中的事件
weixin_39747755的博客
06-05 384
我有一个HTML5画布,我在其中添加了一个图像,我想调用图像的点击事件,但事件不会触发.我正在写一个HTML代码和jqmobile的一些代码This text is displayed if your browser does not shown.$(function () {var ctx = document.getElementById("canvas1").getContext("2d")...
自学web前端练手——HTML5的canvas实现网页画图（html5+css+js）
lvshaoshishang的博客
03-28 3981
html5的canvas实现网页画图步骤： ①定义画布（html5）②设置画布样式（CSS）③js准备绘图的上下文环境④js绘图 效果如下： 点击按钮可以改变画笔颜色和画笔粗细大小。随便画的_(:з」∠)_不要嫌弃我手抖 代码如下： .html <!DOCTYPE html> <html lang="en"> <head> <meta charset...
【部分原创】jquery图表插件flot笔记
Null
10-29 8856
Flot是纯Javascript实现的基于jQuery的图表插件，主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图)。 它的特点是使用简单、图形美观，支持鼠标跟踪及缩放功能。 Flot是基于canvas进行图表的绘制，可以在IE6+/Firefox2+/Safari3+/Opera9.5+/Chrome等主流浏览器上运行；其中IE9以下浏览器不支持canvas标记，需要额
Sketch.js - 直接在浏览器上画图的jQuery插件
weixin_33721344的博客
07-25 670
2019独角兽企业重金招聘Python工程师标准>>> ...
几个画图的js插件
热门推荐
tymcl的专栏
08-15 2万+
1、d3.js  （http://www.d3.org/）使用svg技术，
使用JS HTML5 画图
yubanban的博客
02-16 7089
1.canvas.getContext(“2d”); 返回一个用于在画布上绘图的环境 2.strokeStyle 绘制的颜色 3.beginPath() 4.Arc(x,y,r,0,Math.PI*2,true||false)画一个圆 5.Stroke() 开始绘制 6.moveTo(x,y)绘制一条线的初始位置 7.lineTo(x,y)一条线的终止位置，多个lineTo一起使用时...
jquery中的plot函数的使用
爱玲姐姐的博客
09-19 6189
调用plot函数的方法如下： var plot = $.plot(placeholder, data, options) $.plot($("#submission"), [ {label: "&lt;?php echo $MSG_SUBMIT?&gt;", data: d1, points: {show: true},lines:{show:true},color:"#...
浅谈jquery中使用canvas的问题
qq_32814555的博客
11-24 892
点击打开链接

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值