一个canvas实现的画板

1.实现效果

2.上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一个canvas实现的画板</title><style media="screen">body {background:black; text-align:center}#c1 {background:white; margin-top: 20px;}#choseColor{color:#fff}</style><script>window.onload=function (){let oC=document.getElementById('c1');let gd=oC.getContext('2d');     //图形上下文——绘图接口let oColor=document.getElementById('color1');let color='black';oColor.onchange=function (){color=this.value;};let lastX,lastY;oC.onmousedown=function (ev){lastX=ev.offsetX;lastY=ev.offsetY;oC.onmousemove=function (ev){gd.beginPath();gd.moveTo(lastX, lastY);gd.lineTo(ev.offsetX, ev.offsetY);lastX=ev.offsetX;lastY=ev.offsetY;gd.strokeStyle=color;gd.stroke();};oC.onmouseup=function (){oC.onmousemove=null;oC.onmouseup=null;};};// 清除画布let oButton=document.getElementById('button1');oButton.onclick = function() {gd.clearRect(0, 0, oC.clientWidth, oC.clientHeight);}};</script></head><body><span id="choseColor">选择颜色:</span><input type="color" id="color1"><input type="button" id="button1" value="点击清空"><br><canvas id="c1" width="800" height="600">您的浏览器并不支持canvas，请<a href="http://chrome.google.com/">下载最新版浏览器</a></canvas></body>
</html>

一个canvas实现的画板相关推荐

手把手教你实现一个canvas智绘画板
手把手教你实现一个canvas智绘画板下载地址前言本文主要介绍: 项目介绍项目效果展示一步步实现项目效果踩坑一.项目介绍名称: 智绘画板技术栈: HTML5,CSS3,JavaScr ...
canvas 文字颜色_实现一个canvas小画板
<canvas>是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形.例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染. --摘自MDN ...
实现一个canvas画板
<canvas>是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形.例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染. --摘自MDN ...
canvas 实现绘画板
canvas 实现绘画板起始:使用HTML5的canvas特性,在Vue+element项目中,结合JS实现你画我猜小游戏绘画板,也可以满足订单在确认时候签名的需求.保存了鼠标的轨迹,还有绘画圆形. ...
canvas实现绘画板
历时一周开发了一个简单的canvas实现的画板功能,这是在vue+elementui项目里开发的,支持画笔.橡皮擦.回退.清除.保存图片.切换颜色.设置宽度等.先看最终效果: 1.我们先创建一个can ...
html5 canvas手写画板下载图片至本地
html5 canvas手写画板下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
vue2 + canvas 实现简易画板
前言这两天在做QQ聊天机器人,目前也实现了一些功能准备往里面加一些小游戏的功能,思来想去就准备自己实现一个简易版的你画我猜,但是QQ肯定不支持我发个画板过来,于是便诞生了这个网站picture_b ...
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
开发一个Canvas小游戏实现一个游戏“引擎”
前言这个游戏其实在三四年前就写了,中间还重构过好几次,之前都是用简单的面向对象和函数式编程来写,游戏中的元素关系到还是分的挺开,但是游戏的渲染,运算等逻辑分的不够清晰,整个逻辑基本都是自顶向下的流水 ...

一个canvas实现的画板

一个canvas实现的画板相关推荐

最新文章

热门文章