html学习笔记，canvas基于原图缩放，canvas绘制图形，canvas重绘所有图形，canvas图形被覆盖问题

最新推荐文章于 2023-06-28 16:18:00 发布
最新推荐文章于 2023-06-28 16:18:00 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： html学习笔记 文章标签： canvas基于原图缩放 canvas绘制图形 canvas重绘所有图形 canvas图形被覆盖问题 canvas图形被覆盖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37542524/article/details/118257469
版权

文章目录

  • canvas画布，若果每次都在现有canvas基础上缩放图片，n此之后，图片质量会很差，现在解决方法是图片加载到canvas上的时候，保存一份dataURL。之后的resize都基于原图去做。
  • 这样 就会带来一个问题，在canvas上画的图形，无法在resize原图时在画布上展示。解决方案，抽象绘制图形为一个对象，保存要花的所有图形。提供绘图接口函数。
  • 每次要画一个图形，比如一个框，现将框保存到绘图对象中，然后再调用绘图对象的绘图接口。
  • 当resize画布的时候，调用绘图对象的绘图接口，将所有图形往当前画布绘制一次

1，效果展示

在这里插入图片描述

2，代码干货

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas</title>
		<style>
			html, body{
				width:100%;
				height:100%;
			}
			.main-area{
				position:absolute;
				height:80%;
				right:10%;
				left:10%;
			}
			.main-area .button-area{
				height:30px;
				width:100%;
				background-color:111111;
			}
			.main-area .button-area .button-bar ul li:hover{
				background-color:#d8cdcf;
				cursor:pointer;
			}
			.main-area .button-area .button-bar ul li{
				display:inline-block;
				width:30px;
				height:20px;
				list-style:none;
				float:right;
				text-align:center;
				line-height:20px;
				margin-right:5px;
				border-radius:10px;
				margin-top:5px;
				background-color:pink;
			}
			.main-area .image-area{
				position:absolute;
				top:30px;
				bottom:0;
				width:100%;
				background-color:gray;
				overflow:auto;
			}
			.main-area .image-area .myCanvas{
				position:absolute;
				margin:0;
				padding:0;
				background-color:white;
			}
		</style>
	</head>
	<body>
		<div class="main-area">
			<div class="button-area">
				<div class="input-button" style="display:inline-block; width:40%;float:left;">
					<input  id="fileOne" type="file" style="padding:4px 5px"/>
				</div>
				<div class="button-bar" style="display:inline-block; width:50%;height:30px;float:right;">
					<ul id="id-resize-button" style="margin:0;">
						<li>+</li>
						<li>-</li>
						<li>画</li>
					</ul>
				</div>
			</div>
			<div class="image-area">
				<canvas id="canvasOne" class="myCanvas"></canvas>
			</div>
		<div>
		<script >
		    window.onload = function(){
				EventUtils = {
					addEventListener : function(element, eventType, func){
						if(element.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
							element.addEventListener(eventType, func);
						}else if(element.attachEvent) {                  // IE 8 及更早 IE 版本
							element.attachEvent("on"+eventType, func);
						}else{
							element["on"+eventType] = func;
						}
					},
					moveEventListener : function(element, eventType, func){
						if(element.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
							element.removeEventListener(eventType, func);
						}else if(element.detachEvent) {                   // IE 8 及更早IE版本
							element.detachEvent("on"+eventType, func);
						}else{
							element["on"+eventType] = undefined;
						}
					},
					tirggerEvent : function(element, eventType){
						// IE浏览器
						if(document.all) {
							element[eventType]();
						}
						// 其它浏览器
						else {
							var e = document.createEvent("MouseEvents");
							e.initEvent(eventType, true, true);
							element.dispatchEvent(e);
						}
					},
					addEventForButtons : function(parentNode, eventType, func)
					{
						lis = parentNode.children;
						for(var i=0; i<lis.length; i++)
						{
							var node = lis[i];
							node.index = i;
							if(typeof(func) != "object")
							{
								EventUtils.addEventListener(node, eventType, func);
								continue;
							}
							for(var j=0; j<func.length; j++){
								fun = func[j];
								EventUtils.addEventListener(node, eventType, fun);
							}
						}
					}
				}
				//读取文件内容
				var canvasObj = {
					canvas : document.getElementById('canvasOne'),
					drawInfo : {
						lines : [],
						rects : [],
						pointLists : [],
						clear : function(){
							this.lines = [];
							this.rects = [];
							this.pointLists = [];
						},
						drawRect : function(rect){
							var ctx = canvasObj.canvas.getContext('2d');
							var x = rect.x * canvasObj.canvas.width;
							var y = rect.y * canvasObj.canvas.height;
							var w = rect.w * canvasObj.canvas.width;
							var h = rect.h * canvasObj.canvas.height;
							ctx.strokeRect(x, y, w, h);
						},
						draw : function(){
							console.log("canvasObj drawInfo draw");
							for(var i=0; i< this.rects.length; i++){
								this.drawRect(this.rects[i]);
							}
						}
					},
					init : function(event){
						canvas = this.canvas;
						// 窗口加载后，调整canvs大小，以便目标图片拖入
						this.reLocateCanvas(0, 0);
						/*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
						document.ondragover = function (event) {
							event.preventDefault();  //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave
						};
						document.ondrop = function (event) {
							event.preventDefault();  //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片
						};
						/*拖拽的源对象----- 客户端的一张图片 */
						/*拖拽目标对象----- 若图片释放在此元素上方，则需要在其中显示*/
						canvas.ondragover = function (event) {
							event.preventDefault();
						};
						canvas.ondrop = function (event) {
							var list = event.dataTransfer.files;
							var file = list[0];
							canvasObj.readImageToCanvas(file);
						};
					},
					///< 重定位画布大小
					reLocateCanvas : function(width, height) {
						var canvas = this.canvas;
						var parentNode = canvas.parentNode;
						var clientW = parentNode.clientWidth;
						var clientH = parentNode.clientHeight;
						var w = (width == 0? clientW-50:width);
						var h = (height == 0? clientH-30:height);
						var left = (clientW > w)?Math.floor((clientW - w)/2):0;
						var top = (clientH > h)?Math.floor((clientH - h)/2):0;
						console.log("reLocateCanvas client[%d,%d] wh[%d, %d] left[%d] height[%d]", clientW, clientH, w, h, left, top);
						canvas.style.left = left+"px";
						canvas.style.top = top+"px";
						var ctx = canvas.getContext('2d');
						ctx.canvas.setAttribute("width", w);
						ctx.canvas.setAttribute("height", h);
						parentNode.style.overflowW = (clientW > w)?"hidden":"scroll";
						parentNode.style.overflowY = (clientH > h)?"hidden":"scroll";
					},
					resizeCanvas : function(op){	
						var ctx = this.canvas.getContext('2d');
						console.log("resizeCanvas canvas.client[%d, %d] op[%d]", this.canvas.clientWidth, this.canvas.clientHeight, op);
						var width = this.canvas.clientWidth + op*(this.canvas.clientWidth*0.1);
						var height = this.canvas.clientHeight + op*(this.canvas.clientHeight*0.1);
						//var base64 = this.canvas.toDataURL();//使用该方法获取的图片数据多次resize后，图片质量会变差
						//this.showCanvas(base64, width, height);
						///< 所以缩放第一次加载时保存的图片数据
						this.showCanvas(this.srcDataUrl, width, height);
						
					},
					///< 指定图片内容显示
					showCanvas : function(dataUrl, width, height) {
						var ctx = this.canvas.getContext('2d');
						//加载图片
						var img = new Image();
						img.onload =  function() {
							///< 第一次加载时会执行这个分支，用于缩放图片至当前窗口大小
							if(width == 0 || height == 0){
								var ratioW = canvasObj.canvas.parentNode.clientWidth/img.width;
								var ratioH = canvasObj.canvas.parentNode.clientHeight/img.height;
								if(ratioW < ratioH){
									width = img.width * ratioW;
									height = img.height * ratioW;
								}else{
									width = img.width * ratioH;
									height = img.height * ratioH;
								}
								/*console.log("showCanvas client[%d, %d] img[%d, %d] ratio[%d, %d] width[%d] height[%d]", 
										canvasObj.canvas.parentNode.clientWidth,canvasObj.canvas.parentNode.clientHeight,
										img.width, img.height, ratioW, ratioH, width, height);
								*/
							}
							canvasObj.reLocateCanvas(width, height);
							ctx.drawImage(img, 0, 0, width, height);
							///< 画出画布上要画的所有图形
							canvasObj.drawInfo.draw();
						}
						img.src = dataUrl;
					},
					readImageToCanvas : function (file){
						var reader = new FileReader();
						reader.readAsDataURL(file);
						reader.onload = function (e) {
							///<存储一份原始的DataUrl,以便后面缩放（解决图片质量变差问题）
							canvasObj.srcDataUrl = reader.result;
							///< 清空画布中形状记录
							canvasObj.drawInfo.clear();
							///< 将结果显示到canvas
							canvasObj.showCanvas(reader.result, 0, 0);
						}
					},
					drawRect : function(fX, fY, fW, fH){
						this.drawInfo.rects.push({x:fX,y:fY,w:fW,h:fH});
						this.drawInfo.draw();
					}
				}
				
				inputChangefun = function (event) {
					//1.获取选中的文件列表
					var fileList = event.target.files;
					var file = fileList[0];
					canvasObj.readImageToCanvas(file);
				}
				
				resizeCanvasByButton = function(event){
					if(event.target.index > 1){
						canvasObj.drawRect(0.2, 0.3, 0.5, 0.5);
						return;
					}
					var op = (event.target.index==0)?1:-1;
					canvasObj.resizeCanvas(op);
				}
				
				///< 初始化canvas
				canvasObj.init();
				///< input标签绑定onchange事件
				EventUtils.addEventListener(document.getElementById('fileOne'), "change", inputChangefun);
				///< resize按钮绑定click事件
				EventUtils.addEventForButtons(document.getElementById("id-resize-button"), "click", resizeCanvasByButton);
			
				
			}
		</script>
	<body>
</html>
位面元哥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
09-28
HTML5 Canvas 是一种强大的网页图形绘制工具，允许开发者通过JavaScript代码动态地在网页上画出各种复杂的图形。本文将深入探讨如何使用HTML5 Canvas绘制图形，通过八个实例来展示其功能。 1. **绘制直线** 要在...
HTML5 canvas基本绘图之图形组合
09-28
HTML5的`<canvas>`元素是网页中动态图形绘制的核心工具，它允许开发者通过JavaScript来绘制复杂的图形和图像。在HTML5中，`<canvas>`元素的使用涉及到多个步骤，首先是通过HTML创建`<canvas>`标签，并设置其高度和...
使用canvas划线遇到的覆盖问题
Dyj_zf的博客
05-06 655
可以发现右边的图边框是灰色的，是连接线的颜色覆盖了小球边框的颜色，周围小球是遍历数组渲染的，遍历的时候是先画的链接线后画的球，当时不明白问题出在了哪里，打断点发现，是遍历第二个数据的时候画连接线的颜色设置覆盖了一个球的边框颜色设置，后来发现canvas画图的时候画完一条线之后，使用。这样，第二条线将使用新的颜色进行绘制，而不会覆盖第一条线。以确保下一条线使用正确的颜色。想实现这样一个功能，开发中发现了问题，汇出的图是这样的。注：关键点在beginPath()，，并使用 beginPath()
canvas水印
Wq_2977的博客
05-15 507
主要记录水印部分，如下： HTML和CSS就不写了 JavaScript封装的部分： function time(split) { let date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); ...
Canvas大小改变后进行图像重绘
热门推荐
shawnan的专栏
04-27 2万+
Canvas的大小如果改变了，会把所有图像进行清除，但是实际应用中经常会出现需要改变Canvas大小的需求，尤其是安卓设备上，如果页面的输入法打开了再关闭就会引起Canvas的大小改变。现在寻找到了在大小改变之前进行存储图像，改变后再重绘图像的办法，顺便将Canvas的大小设置进行记录。         Canvas的大小设置不能采用CSS的style进行设置，CSS的方式只是对Canvas进行
有关Canvas图像覆盖问题
he_dong_3的专栏
05-07 6060
图像重叠问题 项目开发过程中使用了MPAndroidChart开源库，在绘制自定义Marker时出现了图像重叠的问题。类似效果如下图所示： 图中有三个圆形顶点，两条线段和三个矩形标签。而预期效果是顶点始终位于标签的下方。 本文针对该问题，阐述具体的解决方法。
canvas设置lineWidth属性，出现线条被fill覆盖问题。
m0_51066449的博客
03-12 1202
html新元素canvas设置lineWidth属性，出现线条被fill覆盖问题，原因及解决方法。
HTML5 canvas基本绘图之图形变换
09-27
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之图形变换，感兴趣的小伙伴们可以参考一下
Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)
09-02
在Android编程中，Canvas是用于在屏幕上绘制图形的重要类，而Path则是用来描述复杂路径的工具，能够绘制出各种形状，如圆形、矩形、椭圆以及不规则多边形等。下面我们将深入探讨如何利用Path在Canvas上绘制这些基本...
html5 canvas实现的绘图工具自由绘制图形画板特效代码
03-20
这是一款基于html5 canvas实现的绘图工具自由绘制图形画板源码，具备画板基本的线、矩形、铅笔、圆、五角星等绘图工具，及颜色与边框的填充，橡皮擦等功能。绘图完毕还具有保存图片的功能。是一款非常实用的经典...
html 图片整体缩放,html页面中css缩放图片的方法
weixin_36011746的博客
05-31 4803
在html页面制作中，可以利用 CSS 中的 transform 属性对图片进行旋转，缩放，移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。css transform 属性的介绍transform：该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。缩放使用值：scaleY(n)：对高度进行缩n倍的缩放scaleX(n)...
【前端可视化】Canvas 绘制图层覆盖了怎么办？
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
06-28 591
ctx.globalCompositeOperation = 'destination-over'; Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型，其中 type 是用于标识要使用的合成或混合模式操作的字符串。 destination-over:在现有的画布内容后...
调用drawImage()在canvas标签中不显示图像的问题及解决方案
lxow456的博客
05-30 4559
问题描述  初学红宝书中的canvas标签，在学到drawImage方法的时候，根据书上的代码敲了一遍但在自己的canvas中显示不出图像。  书中代码： var image=document.images[0]; context.drawImage(image,10,10);   照着敲到了自己的代码中，结果canvas中始终是一片空白。 原因  百度之后，得出原因：等图片加载成功后才可以绘制，当图片未加载成功时使用drawImage()，不会被调用，绘制会失败。 解决方案  1.当图像使用img标签时
神奇的canvas——巧用 canvas 为图片添加水印
weixin_34390996的博客
03-05 1047
代码地址如下：http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章，是通过 canvas 来实现一个绚丽的动画效果，不管看过没看过的小伙伴都可以直接猛戳下面的链接直达这篇文章哦！ 因为之前很多篇都是偏向理论的，所以这次决定上点实际的内容——通过 canvas 为图片添加自定义水印，并且在文章末尾也会附上源码。下面进入正文~...
html5 canvas 遮罩,HTML5 Canvas视频背景+图片透明遮掩层
weixin_33170268的博客
05-30 970
JavaScript语言：JaveScriptBabelCoffeeScript确定// canvas settingsvar mViewWidth = 0,mViewHeight = 0,mCanvas = document.getElementById("mycanvas"),mCtx;var mImage = document.getElementById('image'),mVideo =...
canvas 生成页面水印，MutationObserver 控制节点防修改
06-25 678
网上浏览的时候。看到有些页面会有背景的水印效果，使用canvas实现了个类似的效果，如图 可以作为背景，也可以作为页面前景覆盖，防止网页信息的截图 实现代码 let canvas = document.createElement('canvas') canvas.id = '__c...
[HTML5资料]Canvas教程，通过脚本（通常是JavaScript）绘图的HTML元素
最新发布
02-20
HTML5中的Canvas教程深入探讨了如何利用JavaScript在网页上进行动态绘图和...随着Web技术的发展，Canvas将继续发挥重要作用，特别是在WebGL（基于OpenGL ES的Web图形库）与它结合后，为更高级的3D图形渲染打开了大门。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值