canvas实现涂鸦功能

最新推荐文章于 2023-06-11 19:55:39 发布
最新推荐文章于 2023-06-11 19:55:39 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： Html5_学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hb707934728/article/details/70171287
版权
本文详细介绍了如何利用HTML5的canvas元素实现一个简单的在线涂鸦功能。从创建画布到监听鼠标事件，再到绘制线条，一步步教你打造属于自己的涂鸦板。通过这个功能，用户可以在网页上自由绘画，体验趣味互动。
摘要由CSDN通过智能技术生成 

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Magnifying Glass</title>
		<style>
			body {
				background: #dddddd;
			}
			
			option {
				padding-right: 5px;
			}
			
			.floatingControls {
				position: absolute;
				left: 105px;
				top: 70px;
				width: 300px;
				padding: 20px;
				border: thin solid rgba(0, 0, 0, 0.3);
				background: rgba(0, 0, 200, 0.1);
				color: blue;
				font: 14px Arial;
				-webkit-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
				-moz-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
				box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
				display: none;
			}
			
			.floatingControls p {
				margin-top: 0px;
				margin-bottom: 20px;
			}
			
			#iconCanvas {
				background: #eeeeef;
				border: thin solid #aaaaaa;
				cursor: pointer;
				-webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
				-moz-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
				box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
				border-radius: 8px;
			}
			
			#drawingCanvas {
				background: #ffffff;
				border: thin solid #aaaaaa;
				cursor: crosshair;
				margin-left: 10px;
				-webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
				-moz-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
				box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
				border-radius: 12px;
			}
			
			#controls {
				padding-top: 5px;
				padding-bottom: 10px;
				padding-left: 100px;
			}
			
			select {
				margin-right: 15px;
			}
			
			@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
				#controls {
					padding-top: 10px;
					padding-bottom: 10px;
				}
				#drawingCanvas {
					background: #ffffff;
					border: thin solid #aaaaaa;
					cursor: crosshair;
					margin-left: 10px;
					-webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
					-moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
					box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
					-webkit-border-radius: 8px;
					-moz-border-radius: 8px;
					border-radius: 8px;
				}
			}
			
			@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
				#controls {
					padding-top: 20px;
					padding-bottom: 10px;
					padding-left: 85px;
				}
				#drawingCanvas {
					background: #ffffff;
					cursor: crosshair;
					margin-left: 5px;
					-webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
					-moz-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
					box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
					-webkit-border-radius: 10px;
					-moz-border-radius: 10px;
					border-radius: 10px;
				}
				#snapshotImageElement {
					position: absolute;
					left: 85px;
					top: 30px;
					margin: 20px;
					display: none;
				}
			}
			
			#snapshotButton {
				margin-left: 150px;
			}
			
			#snapshotInstructions {
				position: absolute;
				left: 300px;
				top: 0px;
				margin-top: 17px;
				display: none;
			}
			
			#keyboard {
				position: absolute;
				left: 25px;
				top: 0px;
				width: 1000px;
				height: 0px;
				background: rgba(129, 129, 138, 0.4);
				-webkit-box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 4px;
				-moz-box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 4px;
				box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 4px;
			}
		</style>
	</head>

	<body>
		<div id='controls'>
			Stroke:
			<select id='strokeStyleSelect'>
				<option value='red'>red</option>
				<option value='green'>green</option>
				<option value='blue'>blue</option>
				<option value='orange'>orange</option>
				<option value='cornflowerblue' selected>cornflowerblue</option>
				<option value='goldenrod'>goldenrod</option>
				<option value='white'>white</option>
				<option value='purple'>purple</option>
			</select>

			Fill:
			<select id='fillStyleSelect'>
				<option value='red'>red</option>
				<option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
				<option value='green'>green</option>
				<option value='rgba(0,255,0,0.5)'>semi-transparent green</option>
				<option value='blue'>blue</option>
				<option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
				<option value='orange'>orange</option>
				<option value='rgba(255,165,0,0.5)'>semi-transparent orange</option>
				<option value='cornflowerblue'>cornflowerblue</option>
				<option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
				<option value='goldenrod'>goldenrod</option>
				<option value='rgba(218,165,32,0.5)' selected>semi-transparent goldenrod</option>
				<option value='white'>white</option>
				<option value='rgba(255,255,255,0.5)'>semi-transparent white</option>
				<option value='purple'>purple</option>
				<option value='rgba(255,0,255,0.5)'>semi-transparent purple</option>
			</select>

			Line width:
			<select id='lineWidthSelect'>
				<option value='1.0'>1.0</option>
				<option value='2.0'>2.0</option>
				<option value='3.0'>3.0</option>
				<option value='4.0'>4.0</option>
				<option value='5.0'>5.0</option>
				<option value='6.0'>6.0</option>
			</select>

			<input id='eraseAllButton' type='button' value='Erase all' />
			<input id='snapshotButton' type='button' value='Take snapshot' />
			<span id='snapshotInstructions'>Drag the image to your desktop (or Right-click to save to disk)</span>
		</div>

		<img id='snapshotImageElement' alt='' />
		<!-- What's up with the need for alt='', Opera?!? -->

		<canvas id='iconCanvas' width='75' height='670'>
      Canvas not supported
    </canvas>

		<canvas id='drawingCanvas' width='915' height='670'>
      Canvas not supported
    </canvas>

		<div id='keyboard'></div>

		<div id='curveInstructions' class='floatingControls'>
			<p>
				The yellow circle is a control point for the curve. Drag that circle around to change the shape of the curve.
			</p>

			<input id='curveInstructionsOkayButton' type='button' value='Okay' />
			<input id='curveInstructionsNoMoreButton' type='button' value='Do not show this again' />
		</div>

		<script src='keyboard.js'></script>
		<script>
			var iconCanvas = document.getElementById('iconCanvas'),
				drawingCanvas = document.getElementById('drawingCanvas'),
				drawingContext = drawingCanvas.getContext('2d'),
				backgroundContext = document.createElement('canvas').getContext('2d'),
				iconContext = iconCanvas.getContext('2d'),
				strokeStyleSelect = document.getElementById('strokeStyleSelect'),
				fillStyleSelect = document.getElementById('fillStyleSelect'),
				lineWidthSelect = document.getElementById('lineWidthSelect'),
				eraseAllButton = document.getElementById('eraseAllButton'),
				snapshotButton = document.getElementById('snapshotButton'),
				controls &
最低0.47元/天 解锁文章
hb707934728
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用Canvas 实现前端图片涂抹效果
少东的博客
02-27 3042
最近在做image inpainting，想做一个前端页面，可以自定义mask，然后传到后端处理，效果如下： 代码如下： html，其中的 jquery.min.js 随便找个jquery 的链接复制一下放到本地就好了。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF...
vue组件：canvas实现图片涂鸦功能
weixin_34376986的博客
10-30 3756
方案背景 需求 需要对图片进行标注，导出图片。 需要标注N多图片最后同时保存。 需要根据多边形区域数据（区域、颜色、名称）标注。 对应方案 用canvas实现涂鸦、圆形、矩形的绘制，最终生成图片base64编码用于上传 大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形、矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。 ...
Canvas制作简易涂鸦板
yuansusu_的博客
12-19 1057
canvas,vue,css,js
Canvas实现缩放+涂鸦改进
qq_40734247的博客
06-11 1598
基于 Canvas 实现的图片缩进+拖拽+涂鸦
canvas实现涂鸦效果--基本涂鸦效果
King博客
03-26 5469
用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。 由于篇幅问题，本文主要实现基本涂鸦效果。 编写静态页面 html代码和css样式如下图，这一块比较简单，也不是本文重点，可自行查看，最后效果如图1。 实现原理 声明变量和初始化数据，详细代码如下图，具体用途说明都已经有备注，主要分析两点： 1.offCa...
canvas涂鸦板
AdrianRD的博客
10-13 469
基于canvas的涂鸦板 可设置画笔颜色 可设置画笔宽度 可撤销画笔动作 兼容PC和移动端 下载完整demo 使用示例html<div class="boardBox" id="box"></div>jsborad = new A_DoodleBoard('box'); borad.init();css.boardBox{ width: 100%; height: 500px;
canvas实现涂鸦效果
02-28
"canvas实现涂鸦效果"这个主题涉及到的是如何利用Canvas API来创建一个具有涂鸦功能的画板应用。下面将详细讲解实现这一功能所涉及的关键知识点。 1. **Canvas API基础**： - `canvas`元素：HTML5中的`<canvas>`...
移动端canvas实现涂鸦效果
06-01
在移动端开发中，Canvas元素是实现各种动态效果和交互功能的重要工具，特别是在创建自定义画板或涂鸦应用时。本文将深入探讨如何利用HTML5的Canvas API来实现一个具有涂鸦基本功能、笔触调整、橡皮擦、历史记录、...
canvas涂鸦.rar
07-14
pc文件夹里是适配PC端的涂鸦画板 vue-mobile文件夹里是基于vue实现的适配移动端的涂鸦画板 请程序猿自行选择嵌入使用 主要包括批改图片作业的小功能 颜色板 错 对 画笔 矩形 箭头 文字 回退 橡皮檫 保存成png
sketchpad-简单的HTML5 Canvas涂鸦画板插件
12-12
sketchpad是一款基于HTML5 Canvas的涂鸦画板jQuery插件。它可以使用鼠标在画板上绘制各种涂鸦图案，可以修改线条的尺寸和颜色，还可以回播绘制的过程动画，以及将绘制的图案保持为Json或对象，在其它地方进行恢复操作。
html5-canvas-web-图片涂鸦
12-21
html5-canvas-web-图片涂鸦
drawing-canvas
04-02
＃drawing-canvas
Drawing-Canvas
05-18
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 而是将所有配置文件和传递依赖项（web
HTML5 canvas支持触摸屏的签名涂鸦插件
12-02
HTML5 canvas支持触摸屏的签名涂鸦插件
html5 canvas实现涂鸦写字板效果.zip
最新发布
09-26
在这个“html5 canvas实现涂鸦写字板效果.zip”压缩包中，包含了一个基本的涂鸦写字板的实现，主要依赖于HTML5的Canvas元素以及jQuery库。这个特效代码可以用于各种场合，比如在线教育平台让学生画图解释概念，或者...
canvas画板涂鸦
shuijinye的博客
07-26 487
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas w
HTML Canvas 涂鸦
Ryan Z 的技术日志
10-12 1297
HTML Canvas 涂鸦一 javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com * { margin: 0; padding: 0; } .fa { width: 740px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值