canvas 制作简易涂鸦画板(教程)

公司大电视机是安卓系统而且系统,但因为突然无法联网又不允许第三方应用程序,但零时需要画板功能。所以就简单做个画板工具代替一下。

1.在canvas中获取光标坐标

获取坐标的代码很简单:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>*{margin: 0;padding: 0}</style>
</head><body><canvas id="board" style="border: 1px #ccc solid;"></canvas><span id="point"></span><script>var canvas = document.getElementById('board');var context = canvas.getContext('2d');var current = {color: 'black',//<===画笔颜色配置width: 1//线条宽度 };//获取点坐标function getPoint(e) {if (e.touches && e.touches.length > 0) {var touch = e.touches[0];return { x: touch.pageX, y: touch.pageY };}return { x: e.clientX, y: e.clientY };}//鼠标移动function onMouseMove(e) {var p = getPoint(e);document.getElementById("point").innerHTML=p.x+"-"+p.y;}canvas.width = 600;canvas.height = 300; canvas.addEventListener('mousemove', onMouseMove, false); //<==兼容PCcanvas.addEventListener('touchmove', onMouseMove, false);//<===兼容安卓或其他系统</script>
</body>
</html>

注意:因为鼠标与触摸屏的事件是不一样的,鼠标只要悬浮与canvas上就可以获取到了,而触摸屏是需要按下的,并且所返回的 Event 对象也是不一样的。

2.控制是否绘制

控制是否绘制其实很简单,就是在不同事件时判断自定义变量drawing的值来控制

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>*{margin: 0;padding: 0}</style>
</head><body><canvas id="board" style="border: 1px #ccc solid;"></canvas><span id="point"></span><script>var canvas = document.getElementById('board');var context = canvas.getContext('2d');var current = {color: 'black',//<===画笔颜色配置width: 1//线条宽度 };var drawing = false;//<===是否绘制//获取点坐标function getPoint(e) {if (e.touches && e.touches.length > 0) {var touch = e.touches[0];return { x: touch.pageX, y: touch.pageY };}return { x: e.clientX, y: e.clientY };}//鼠标按下function onMouseDown(e) {drawing = true; }//鼠标弹起function onMouseUp(e) {if (!drawing) { return; }drawing = false; }//鼠标移动function onMouseMove(e) {if (!drawing) { return; }var p = getPoint(e);document.getElementById("point").innerHTML=p.x+"-"+p.y;}canvas.width = 600;canvas.height = 300; canvas.addEventListener('mousedown', onMouseDown, false);canvas.addEventListener('mouseup', onMouseUp, false);canvas.addEventListener('mouseout', onMouseUp, false);canvas.addEventListener('mousemove', onMouseMove, false);canvas.addEventListener('touchstart', onMouseDown, false);canvas.addEventListener('touchend', onMouseUp, false);canvas.addEventListener('touchmove', onMouseMove, false);</script>
</body>
</html>

3.线条绘制

线条绘制的代码也是很简单的

....
//线条绘制
function drawLine(x0, y0, x1, y1, color, width) {context.beginPath();context.moveTo(x0, y0);context.lineTo(x1, y1);context.strokeStyle = color;context.lineWidth = width; context.stroke();context.closePath();
}
....

将绘制线条代码整合到事件中:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><canvas id="board" style="border: 1px #ccc solid;"></canvas><span id="point"></span><script>var canvas = document.getElementById('board');var context = canvas.getContext('2d');var current = {color: 'black',//<===画笔颜色配置width: 1//线条宽度 };var drawing = false;//<===是否绘制//获取点坐标function getPoint(e) {if (e.touches && e.touches.length > 0) {var touch = e.touches[0];return { x: touch.pageX, y: touch.pageY };}return { x: e.clientX, y: e.clientY };}//线条绘制function drawLine(x0, y0, x1, y1, color, width) {context.beginPath();context.moveTo(x0, y0);context.lineTo(x1, y1);context.strokeStyle = color;context.lineWidth = width; context.stroke();context.closePath();}//鼠标按下function onMouseDown(e) {drawing = true;//记录按下点var p = getPoint(e);current.x = p.x;current.y = p.y;}//鼠标弹起function onMouseUp(e) {if (!drawing) { return; }drawing = false;//绘制结束点var p = getPoint(e);drawLine(current.x, current.y, p.x, p.y, current.color, current.width);}//鼠标移动function onMouseMove(e) {if (!drawing) { return; }var p = getPoint(e);document.getElementById("point").innerHTML = p.x + "-" + p.y;//移动绘制drawLine(current.x, current.y, p.x, p.y, current.color, current.width);current.x = p.x;current.y = p.y;}canvas.width = 600;canvas.height = 300;canvas.addEventListener('mousedown', onMouseDown, false);canvas.addEventListener('mouseup', onMouseUp, false);canvas.addEventListener('mouseout', onMouseUp, false);canvas.addEventListener('mousemove', onMouseMove, false);canvas.addEventListener('touchstart', onMouseDown, false);canvas.addEventListener('touchend', onMouseUp, false);canvas.addEventListener('touchmove', onMouseMove, false);</script>
</body></html>

4.绘制线条优化

当绘制线条宽度比较小的时候还好,一旦比较粗就会有写问题:

img_42655df3815d0625217de805276f3a8a.jpe
宽度为 1
img_5612b7eb18df06f708920c9250ac5e50.jpe
宽度为 10

这时只要稍微改一下绘制的代码就行了

....
//线条绘制
function drawLine(x0, y0, x1, y1, color, width) {context.beginPath();context.moveTo(x0, y0);context.lineTo(x1, y1);context.strokeStyle = color;context.lineWidth = width; //-----加入-----context.lineCap = "round";context.lineJoin = "round";//-----加入-----context.stroke();context.closePath();
}
....
img_5caf70e1eae1ea47d7d58b171eb2f70b.jpe
效果

示例.html <===打开地址后 将 图片保存到本地,吧后缀改成html

5.其他功能

清空画板

function clear() {context.clearRect(0, 0, canvas.width, canvas.height);}

保存画板

function save() {var a = document.getElementById("download");if (!a) {a = document.createElement("a");a.download = "save.png";a.hidden = "hidden";}a.href = canvas.toDataURL('image/png');a.click();}

全屏与退出全屏

//全屏与非全屏状态切换
function toggle_fullscreen() {var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;if (fullscreenEnabled) {if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {launchIntoFullscreen(document.documentElement);$("#expand>i").removeClass("fa-expand");$("#expand>i").addClass("fa-compress");} else {exitFullscreen();$("#expand>i").removeClass("fa-compress");$("#expand>i").addClass("fa-expand");}}}//进入全屏function launchIntoFullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}}//退出全屏function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/353771.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

基于涂鸦 Arduino SDK 制作的幻彩灯带（内涵详细开发步骤）

基于涂鸦 Arduino SDK 制作的幻彩灯带（内涵详细开发步骤）

作者&#xff1a;金拱门门神 基于涂鸦Arduino SDK制作的幻彩灯带 物料清单硬件 (4) RGB灯带数量&#xff1a;1 淘宝10元Arduino Uno数量&#xff1a;1 淘宝25元涂鸦CBU模组数量&#xff1a;1 涂鸦提供PCB数量&#xff1a;1 捷配免费打样 步骤 1.在涂鸦平台创建产品 https…
阅读更多...
PS制作涂鸦风格非主流图片教程

PS制作涂鸦风格非主流图片教程

PS制作涂鸦风格非主流图片教程 2009-04-07 16:10:05 作者&#xff1a; 来源&#xff1a; 互联网 浏览次数&#xff1a; 227 文字大小&#xff1a;【 大】【 中】【 小】 效果图 1 效果图 2 原图 1、打开文件&#xff0c;新建一文档。如下图&#xff1a;
阅读更多...
canvas涂鸦板

canvas涂鸦板

canvas涂鸦板 功能说明 此画板兼容PC端和移动端&#xff0c;是使用HTML5开发的一款画图软件&#xff0c;用户可以在画板中随意涂鸦&#xff0c;然后保存成图片 技术说明&#xff1a; 利用canvas的画图功能html5在pc端和移动端浏览器中的事件差异 开发步骤 html代码 <…
阅读更多...
给文字做涂鸦效果的五种实现方案

给文字做涂鸦效果的五种实现方案

介绍 在很多创意网站上&#xff0c;我们都会见到很多文字涂鸦效果&#xff0c;本期我们就介绍五种方法来实现这些文字涂鸦效果&#xff0c;康康如何通过前端技术&#xff0c;一起来让你的网页更有创意吧。 当然在做之前&#xff0c;我们先准备一张涂鸦纹理图哟~ 正文 backgr…
阅读更多...
涂鸦音乐

涂鸦音乐

在声音处理技术里有一种常用方法就是将声音信号转化成频谱图。比如下面这幅图&#xff0c;就是由一段小提琴演奏转化而来的。 有人会问&#xff0c;转成频谱图后又怎样呢&#xff1f;我不想谈接下来技术上可以做的各种分析&#xff0c;只从人感知信息的方式这个角度来说。 频谱…
阅读更多...
c++小游戏制作02：涂鸦跳跳

c++小游戏制作02：涂鸦跳跳

先看效果图： 首先需要先下载安装SFML安装包，这里我下载的是64位的 然后解压放在一个文件夹下，记好路径 然后要在VS中加入路径 在VC++目录中配置包含目录和库目录 包含目录的路径：D:\SFML-2.5.1\include 库目录的路径：D:\SFML-2.5.1\lib 然后在链接器-输入-添加依赖项中…
阅读更多...
涂鸦

涂鸦

在熟悉painter这个软件&#xff0c;开始胡乱的涂鸦&#xff0c;笔触虽多&#xff0c;不过要搞懂怎么用还真不是件简单的事。
阅读更多...
【unity】分享一个2D小游戏的完整制作教程——涂鸦跳跃demo

【unity】分享一个2D小游戏的完整制作教程——涂鸦跳跃demo

文章目录 前言1.贴图准备跳板的逻辑人物的逻辑相机的逻辑如何自动生成跳板如何赢得游戏 前言 这个只是练手的一个2D小游戏&#xff0c;不许商用哦完成了原版的一个关卡的内容&#xff0c;跳板也只有一种&#xff0c;但是如果需要的话可以往深了做的项目地址Demo试玩&#xff0…
阅读更多...
vb鼠标涂鸦板的制作

vb鼠标涂鸦板的制作

实验要求 掌握使用Picture1_MouseDown语句/Picture1_MouseUp&#xff0c;Picture1_MouseMove语句和Command Dialog的实现方法。实现鼠标画图程序。编写实验报告。 效果 清除画布的代码&#xff08;本实验没添加这个功能&#xff0c;留着备用&#xff09; Privte Sub Command…
阅读更多...
制作一个有趣的涂鸦物联网小项目（涂鸦模组SDK开发 CBU BK7231N WiFi+蓝牙模组 HSV彩色控制）

制作一个有趣的涂鸦物联网小项目（涂鸦模组SDK开发 CBU BK7231N WiFi+蓝牙模组 HSV彩色控制）

实现的功能&#xff1a; l APP控制月球灯 l 本地月球灯控制 l APP控制“大白”颜色&#xff0c;实现各种颜色变身 l 门状态传感器状态APP显示 l 网络状态指示灯&#xff0c;连接服务器长亮&#xff0c;断开后闪烁 l 配网按键 l 云端定时功能 l 云端报警提示功能…
阅读更多...
Arduino+涂鸦云，教你制作幻彩灯带

Arduino+涂鸦云，教你制作幻彩灯带

大家好&#xff0c;我是程序员小哈。前一阵参加了涂鸦智能【幻彩灯带】Arduino开发实战训练营&#xff0c;参与完整个过程&#xff0c;收获颇丰&#xff0c;今天对本次制作的幻彩灯带进行一下小结&#xff0c;希望以后可以再次参与其他内容的训练营活动。 概况 本次DIY内容为基…
阅读更多...
Unity实现在白板上绘画涂鸦

Unity实现在白板上绘画涂鸦

前言 有段时间没有更新博客了&#xff0c;不知道应该写些什么&#xff0c;太简单感觉没有记录的必要&#xff0c;太难自己都没能理解&#xff0c;不知道如何下手。回归初心&#xff0c;记录自己想记录的东西。 需要实现一个白板绘画的功能&#xff0c;可以使用LineRenderer或者…
阅读更多...
手机怎么使用涂鸦？分享几个手机视频怎么添加涂鸦的妙招

手机怎么使用涂鸦？分享几个手机视频怎么添加涂鸦的妙招

相信大家在给视频进行处理时&#xff0c;都会运用一些视频剪辑工具来给视频增添一些涂鸦等效果&#xff0c;比如把云朵涂鸦成独角兽或者与其相似的图案&#xff0c;让那些观看我们视频的人在视觉上增加了些许乐趣&#xff0c;不会显得视频画面太过于枯燥乏味。 那你们知道这些…
阅读更多...
使用Fabric.js库制作一个绘画网站，实现绘画板涂鸦功能

使用Fabric.js库制作一个绘画网站，实现绘画板涂鸦功能

1.学习之前 这个功能是基于vue的&#xff0c;如果你没有学过vue&#xff0c;可能对里面的知识不理解&#xff0c;对于canvas要有一点点的理解&#xff0c;如果没有&#xff0c;建议学习一下 如果实在需要关于Fabricjs写的绘画功能&#xff0c;可以看一下我参考其他人写的文档&a…
阅读更多...
视频涂鸦怎么弄？视频涂鸦用什么软件？

视频涂鸦怎么弄？视频涂鸦用什么软件？

随着时代的发展&#xff0c;大众对于“艺术”这个词的诠释也会变得不同。这段时间里&#xff0c;我的朋友在朋友圈、微博发布的视频都带有浓浓的个人风格&#xff0c;但总体上都是依据“涂鸦”这一形式来进行的。通过在视频中绘制涂鸦&#xff0c;来抒发内心的情绪、展示对艺术…
阅读更多...
如何用ps做出街头涂鸦效果

如何用ps做出街头涂鸦效果

制作过程大概几分钟时间即可搞定&#xff0c;我们主要用的是陌鱼社区街头涂鸦喷绘行为艺术效果PS动作&#xff0c;需要的可以搜一下应该可以找到&#xff0c;下面是效果&#xff1a; 01、载入我们下载文件包时面的预设文件&#xff0c;包括笔刷、图案、动作&#xff0c;关闭Ps软…
阅读更多...
ROS：坐标管理系统

ROS：坐标管理系统

目录 一、机器人中的坐标变换二、TF功能包2.2TF功能包简介2.2TF坐标变换实现2.3TF案例 三、小海龟跟随实验3.1打开小程序3.2查看当前的TF树3.3坐标相对位置关系可视化1&#xff08;tf_echo&#xff09;3.4坐标相对位置关系可视化2&#xff08;rviz&#xff09; 一、机器人中的坐…
阅读更多...
人事管理项目-前端实现

人事管理项目-前端实现

人事管理项目-前端实现 引入Element和Axios开发Login页面配置路由配置请求转发启动前端项目 引入Element和Axios 前端UI使用Element&#xff0c;网络请求则使用Axios&#xff0c;因此首先安装Element和Axios依赖&#xff0c;代码如下&#xff1a; 依赖添加成功后&#xff0c;接…
阅读更多...
动漫推荐之 Fairy Tale 妖精的尾巴

动漫推荐之 Fairy Tale 妖精的尾巴

永远的Fairy Tale!
阅读更多...
妖精的尾巴手游快速升级辅助 爱蜂窝自动新手挂机升级

妖精的尾巴手游快速升级辅助 爱蜂窝自动新手挂机升级

妖精的尾巴手游上线了&#xff0c;是一款特别火的手游&#xff0c;那么如果才能快速升级&#xff0c;迅速提升战斗力呢&#xff0c;主要依靠游戏里面的这些内容。 方式一&#xff1a;主线任务 主线任务是快速升级中速度最快的&#xff0c;能获得大量的经验和等级&#xff0c;后…
阅读更多...
最新文章

Copyright @ 2022~2023