300字范文 > canvas 制作简易涂鸦画板(教程)

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

时间：2018-10-17 12:22:53

相关推荐

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

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

1.在canvas中获取光标坐标

获取坐标的代码很简单:

注意:因为鼠标与触摸屏的事件是不一样的,鼠标只要悬浮与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.绘制线条优化

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

宽度为 1 宽度为 10

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

效果

示例.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();}}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。