Canvas网页涂鸦板再次增强版
2024-05-18 00:14:12
目录
- 第一版Canvas涂鸦板
- 第二版Canvas涂鸦板
- 第三版Canvas涂鸦板
- 体验涂鸦板
第一版Canvas涂鸦板
- 实现功能：在涂鸦板上鼠标按下去拖动的涂鸦效果
- 实现思路：监听鼠标按下、移动、松开事件，将鼠标按下的值赋值给moveTo的x和y值，作为起始位置。在移动事件中，将鼠标距离可视区x和y值赋给lineTo，再进行描边。
- 实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Canvas案例-网页涂鸦板</title></head>
<body><!--<center></center>表示将标签内所有的内容居中--><center><canvas id="cavsElem">你的浏览器不支持canvas，请升级浏览器</canvas></center><script>(function(){//获得画布var canvas = document.getElementById('cavsElem');//准备画笔（获取上下文对象）var context = canvas.getContext('2d');//设置标签的宽高和边框canvas.width = 900;canvas.height = 600;canvas.style.border = "1px solid #000";//当鼠标按下触发onmousedown事件时，定义一个函数获取鼠标起始坐标canvas.onmousedown = function(e) {var x = e.clientX - canvas.getBoundingClientRect().left;var y = e.clientY - canvas.getBoundingClientRect().top;context.beginPath();//开始规划路径context.moveTo(x, y);//移动起始点//当鼠标移动触发onmousemove事件时,定义一个函数获取绘制线条的坐标canvas.onmousemove = function(event) {var x = event.clientX- canvas.getBoundingClientRect().left;var y = event.clientY- canvas.getBoundingClientRect().top;// canvas.clearRect(0, 0, 900, 600);context.lineTo(x, y);//绘制线条context.stroke();//绘制描边};//当鼠标按键被松开时，onmousemovet函数返回nullcanvas.onmouseup = function(event) {canvas.onmousemove = null;};};}());</script>
</body>
</html>
- 实现效果
第二版Canvas涂鸦板
- 实现功能：
- 可以根据颜色板选择涂鸦笔的颜色
- 可以选择画笔的粗细
- 可以对涂鸦板清屏
- 实现思路：
- 颜色板用Html5的
<input type="color">，可以根据该input对象的value值获取选择的颜色码 - 画笔的粗细用了Html5的
<input type="number">，来选择数字，然后将获取的数字值赋给画笔context.lineWidth = x; //设置线的粗细 - 涂鸦板清屏可以使用canvas自带的clearRect属性
context.clearRect(0, 0, canvas.width, canvas.height); //清除矩形
- 颜色板用Html5的
- 实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Canvas案例-网页涂鸦板</title>
</head><body><!--<center></center>表示将标签内所有的内容居中--><center><canvas id="cavsElem">你的浏览器不支持canvas，请升级浏览器</canvas><br>选择画笔颜色：<input type="color" value="#ff0000" id="mycolor" onchange=colorChange() /> <input type="button" value="清除" id="clear" onclick=clearAll()> 选择画笔粗细：<input type="number" id="gsize" value="1" min="1" onchange=sizeChange()></center><script>//获得画布var canvas = document.getElementById('cavsElem');//准备画笔（获取上下文对象）var context = canvas.getContext('2d');//设置标签的宽高和边框canvas.width = 900;canvas.height = 600;context.strokeStyle = document.getElementById("mycolor").value; //设置描边颜色canvas.style.border = "1px solid #000";//当鼠标按下触发onmousedown事件时，定义一个函数获取鼠标起始坐标canvas.onmousedown = function (e) {var x = e.clientX - canvas.getBoundingClientRect().left;var y = e.clientY - canvas.getBoundingClientRect().top;context.beginPath(); //开始规划路径context.moveTo(x, y); //移动起始点//当鼠标移动触发onmousemove事件时,定义一个函数获取绘制线条的坐标canvas.onmousemove = function (event) {var x = event.clientX - canvas.getBoundingClientRect().left;var y = event.clientY - canvas.getBoundingClientRect().top;// canvas.clearRect(0, 0, 900, 600);context.lineTo(x, y); //绘制线条context.stroke(); //绘制描边};//当鼠标按键被松开时，onmousemovet函数返回nullcanvas.onmouseup = function (event) {canvas.onmousemove = null;};};/* 清除画布 */function clearAll() {//清除矩形context.clearRect(0, 0, 900, 600);}/* 颜色选择 */function colorChange() {var mycolor = document.getElementById("mycolor");var x = mycolor.value;// console.log('x :', x);context.strokeStyle = x; //设置描边颜色}/* 画笔粗细 */function sizeChange() {var mycolor = document.getElementById("gsize");var x = mycolor.value;context.lineWidth = x; //设置线的粗细}</script>
</body>
</html>- 实现效果
第三版Canvas涂鸦板
- 实现功能：
- 实现涂鸦时上一步和下一步的功能（撤回）
- 实现选择画布颜色的功能
- 实现对涂鸦的涂鸦板生成图片
- 实现思路：
- 后退和前进（撤回）功能，我的想法是每画一次就将整个画布的数据push到一个数组中，按前进和后退时再将对应的数据取出来，这个可以通过getImageData和putImageData方法实现，这两个方法的使用可以到http://www.w3school.com.cn/tags/html_ref_canvas.asp中查看。
- 选择画布颜色功能有两种（获取颜色板的方法和第二版设置画笔颜色相同）
- 第一种就是将颜色设置为画布的css背景颜色，但是实现生成图片的时候不会把背景颜色生成
- 第二种就是直接在画布上画一个填充矩形，设置填充颜色，生成图片可以生成颜色
- 生成涂鸦图片是先将canvas画板转为base64编码，然后放在了img标签里
- 实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Canvas案例-网页涂鸦板</title>
</head><body><!--<center></center>表示将标签内所有的内容居中--><center><canvas id="cavsElem">你的浏览器不支持canvas，请升级浏览器</canvas><br>选择画布颜色：<input type="color" value="#ffffff" id="mycanvasColor"onchange="canvasColorChange()" /> 选择画笔颜色：<input type="color" value="#ff0000" id="mycolor" onchange="colorChange()" /> <input type="button" value="清除" id="clear" onclick="clearAll()"> 选择画笔粗细：<input type="number" id="gsize" value="1" min="1" onchange="sizeChange()"> <input type="button" value="上一步" onclick="prevStep()"><input type="button" value="下一步" onclick="nextStep()"> <button onClick="saveImg()">生成图片</button><br><h3>下面是涂鸦生成的图片</h3><img id='img' alt='请涂鸦……' /></center><script>//画布数据var imgList = [];//上一步索引var prevIndex = 0;//下一步索引var nextIndex = 0;//当前索引var currentIndex = 0;//获取图片节点var img = document.getElementById('img');//获得画布var canvas = document.getElementById('cavsElem');//准备画笔（获取上下文对象）var context = canvas.getContext('2d');//设置标签的宽高和边框canvas.width = 900;canvas.height = 600;context.strokeStyle = document.getElementById("mycolor").value; //设置描边颜色canvas.style.border = "1px solid #000";//当鼠标按下触发onmousedown事件时，定义一个函数获取鼠标起始坐标canvas.onmousedown = function (e) {upIndex(imgList.length);var x = e.clientX - canvas.getBoundingClientRect().left;var y = e.clientY - canvas.getBoundingClientRect().top;context.beginPath(); //开始规划路径context.moveTo(x, y); //移动起始点//当鼠标移动触发onmousemove事件时,定义一个函数获取绘制线条的坐标canvas.onmousemove = function (event) {var x = event.clientX - canvas.getBoundingClientRect().left;var y = event.clientY - canvas.getBoundingClientRect().top;// canvas.clearRect(0, 0, 900, 600);context.lineTo(x, y); //绘制线条context.stroke(); //绘制描边};//当鼠标按键被松开时，onmousemovet函数返回null//注意，要用document全局监听canvas.onmouseup = function (event) {//调用保存画布数据pushImg();console.log('imgList :', imgList);canvas.onmousemove = null;};};/* 清除画布 */function clearAll() {//清除矩形context.clearRect(0, 0, canvas.width, canvas.height);}/* 画布颜色选择 */function canvasColorChange() {var canvasColor = document.getElementById("mycanvasColor");var x = canvasColor.value;// canvas.setAttribute('style', "background:" + x + ";z-index: -1;"); //直接设置背景颜色context.fillStyle = x; //设置填充颜色context.fillRect(0, 0, canvas.width, canvas.height);}/* 画笔颜色选择 */function colorChange() {var mycolor = document.getElementById("mycolor");var x = mycolor.value;context.strokeStyle = x; //设置描边颜色}/* 画笔粗细 */function sizeChange() {var mycolor = document.getElementById("gsize");var x = mycolor.value;context.lineWidth = x; //设置线的粗细}/* 保存画布数据 */function pushImg() {imgList.push(context.getImageData(0, 0, canvas.width, canvas.height));}/* 上一步 */function prevStep() {clearAll();if (prevIndex >= 0) {context.putImageData(imgList[prevIndex], 0, 0);}upIndex(prevIndex);}/* 下一步 */function nextStep() {console.log('nextIndex :', nextIndex);if (nextIndex !== imgList.length) {clearAll();context.putImageData(imgList[nextIndex], 0, 0);}upIndex(nextIndex);}/* 更新索引 */function upIndex(index) {if (index === -1) {prevIndex = -1;} else {prevIndex = index - 1;}if (index === imgList.length) {nextIndex = imgList.length;} else {nextIndex = index + 1;}currentIndex = index;}/* 生成图片 */function saveImg() {//转为base64编码var dataUrl = canvas.toDataURL();img.src = dataUrl;}</script>
</body></html>
实现效果
体验涂鸦板
点击这里
喜欢的朋友点赞、评论支持一下咯！ ^ _ ^
Canvas网页涂鸦板再次增强版相关推荐
- Android 涂鸦板（简易版）
源码: FruitBackgound.java package com.example.administrator.myapplication.XiaoDabao;import android.ani ...
- Canvas制作简易涂鸦板
使用canvas可以做到许多意想不到的功能,尤其动画方面,这次在vue项目中使用canvas制作一个简易涂鸦板 1. html部分代码 <template><div id=" ...
- javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板 <!doctype html> <head> <meta http-equiv= ...
- H5小游戏 - canvas涂鸦板
H5小游戏 - 涂鸦板 效果截图: html代码如下: <!DOCTYPE html> <html><head><meta charset="utf ...
- android 简易涂鸦板,canvas实现的简易涂鸦板效果
用canvas实现的简易涂鸦板效果,用鼠标点击在画布上随意涂鸦 涂鸦 *{ margin: 0; padding: 0; } #canvas1{ box-shadow: 0 5px 40px blac ...
- java 画笔粗细,javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
- html画布画笔粗细,基于javascript html5 canvas实现可调画笔颜色/粗细/橡皮的涂鸦板...
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
- H5网页涂鸦canvas
最近做了个播放页面,标题和一个iframe;需要对这个iframe可以进行网页涂鸦. 网页涂鸦肯定是canvas了.网上找了个差不多的,实验下来问题很多,干脆自己一步步修改,学习. 效果: 本项目没有 ...
- 触控板手势增强软件：Multitouch Mac版
Multitouch Mac版是Mac平台上一款触控板手势增强软件,你可以使用multitouch mac版添加各种不同的触控板手势,手指轻点.轻扫等就能快速进行操作,使用非常便捷,想要增强触摸板手势 ...
最新文章
- makefile中的零星知识点
- linux文件解压zip文件,linux下解压zip文件报错
- [基础]iOS 可视化编程(全系列)
- mysql主从结构主数据库_mysql主从结构主数据库中的日志
- MySQL 输入任何语句都提示You must reset your password using ALTER USER 解决方法
- 西安石油大学计算机基础考试试题,2017年西安石油大学计算机学院824计算机组成原理考研题库...
- 为什么雷军指责“华为不懂研发”？
- jquery-幻灯片的移动分析
- Linux运维面试题之--网页打开缓慢如何优化
- 第二周作业求最大值和最小下标
- Vue项目报错：This relative module was not found
- 腾讯变革 150 天全记录
- 《Android开发从零开始》——31.模拟Http请求
- 安卓开发和python哪个难_入门IT该学Java还是Python？看完这篇你就懂了
- spss统计分析基础教程（上）--自学
- 电路复习——集成运算放大器电阻电路
- 基于SLAM的机器人的自主定位导航
- Ubuntu18.04笔记本触控板失效解决办法
- ES选举：Elasticsearch中Master选举完全解读
- 3D打印技术如何影响未来