html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下
Html部分:
Document
CSS部分:
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
margin: 30px;
}
#cavs{
border: 1px solid red;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.container ul{
margin-top: 20px;
width: 700px;
text-align: center;
}
.container ul li{
display: inline-block;
margin-left: 35px;
}
.container ul li input{
padding: 6px 15px;
border-radius: 10px;
border: none;
outline: none;
cursor: pointer;
transition: box-shadow 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.container ul li input:hover{
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
JS部分:
var drawingBoard = {
cavs: document.getElementById('cavs'),
ctx: document.getElementById('cavs').getContext('2d'),
ul_node: document.getElementsByTagName('ul')[0],
colorBoard: document.getElementById('color'),
lineRuler: document.getElementById('lineRuler'),
imgArr: [],//存放图片
init: function () {
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
this.drawing();//开始画画
this.btnsFnAll();
},
drawing: function () {
var self = this;
var left = this.cavs.offsetLeft;
this.cavs.onmousedown = function (e) {
var e_x = e.pageX;//鼠标在画布上的x点
var e_y = e.pageY;
self.ctx.beginPath();//开始绘制
self.ctx.moveTo(e_x - left, e_y - left);//落笔点,开始点
var imgData = self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight);
self.imgArr.push(imgData)
document.onmousemove = function (e) {
self.ctx.lineTo(e.pageX - left, e.pageY - left);//落笔点,开始点
self.ctx.stroke();
}
document.onmouseup = function () {
document.onmousemove = null;
self.ctx.closePath();//闭合当前的路径 结束绘制
}
this.onpointerleave = function () {
document.onmousemove = null;
}
}
},
btnsFnAll: function () {
var self = this;
this.ul_node.addEventListener('click', function (e) {
console.log(e.target.id);
switch (e.target.id) {
case 'cleanBoard'://清屏
self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight)
break;
case 'eraser'://橡皮
self.ctx.strokeStyle = "#ffffff";
break;
case 'save'://保存
let url = self.cavs.toDataURL('image/jpg');
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = '草稿纸';
a.target = '_blank';
a.click()
break;
case 'rescind'://撤销
console.log(self.imgArr)
if (self.imgArr.length > 0) {
self.ctx.putImageData(self.imgArr.pop(), 0, 0)
}
break;
}
});
this.colorBoard.onchange = function () {
self.ctx.strokeStyle = this.value;
};
this.lineRuler.onchange = function () {
self.ctx.lineWidth = this.value
}
}
}
drawingBoard.init();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5画板功能,JS实现canvas简单小画板功能相关推荐
- linux脚本石英钟,原生JS实现的简单小钟表功能示例
本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: www.jb51.net 钟表 body { background-color:#00A2 ...
- python怎么建立画板_Python3使用PyQt5制作简单的画板/手写板实例
1.前言 版本:Python3.6.1 + PyQt5 写一个程序的时候需要用到画板/手写板,只需要最简单的那种.原以为网上到处都是,结果找了好几天,都没有找到想要的结果. 网上的要么是非python ...
- python实现画板_Python3使用PyQt5制作简单的画板/手写板
0.目录 1.前言 在定点和移动中的鼠标所在处画一条线 在定点和移动中的鼠标所在处画一条线 并将画过的线都保留在窗体上 将按住鼠标后移动的轨迹保留在窗体上 将按住鼠标后移动的轨迹保留在窗体上 并解决二 ...
- HTML5之简单小画板
一:先熟悉一下基本图形绘制 1:线条 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- Java制作简单小画板
Java制作简单画板,包括两个类,一个主要画板类Drawpad,一个画板监听器DrawListener类. 1.Drawpad类,包括画板,画板功能设计,保存图片等 package Java课程设计; ...
- 仿百度文库html5源码,JS实现仿百度文库评分功能
百度文库分享平台大家都知道,今天小编通过一段实例代码给大家介绍基于js实现百度文库评分功能,先给大家展示效果图吧. 具体代码如下所示: 无标题文档 *{padding:0;margin:0;} #co ...
- html5射箭游戏,好玩的Canvas射箭小游戏
Canvas射箭小游戏 body{ margin:0; background:#222; margin:20px; } svg{ width:100%; height:100%; position:f ...
- Html5 canvas 简单画布画板涂鸦例子
简单的Html5 canvas 画板涂鸦例子,巧妙的使用onmousemove 事件来实现画画, 可以实现指定颜色和宽度,如图: <!DOCTYPE HTML> <html>& ...
- 原生js完成一个简单的抽奖功能
文章目录 前言 实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖 完整代码 HTML部分 CSS部分 ...
最新文章
- 可逼近信道容量编码技术之霍夫曼编码的实现
- 队列判空_数据结构与算法——队列的C语言实现
- 【给自己的小练习2-线段树】
- 关于c++深拷贝与浅拷贝
- SAP ERP系统之库存参数选择与优化
- HDU - 1160 FatMouse's Speed(最长不下降子序列)
- 【Python小工具函数】各种日期格式的转换、在某个日期上减去n天、判断List中是否含有数字
- linux nslcd服务,Ubuntu 通过ldap集成AD账号登录(nslcd方式)
- 祝各位网友儿童节快乐!
- 为什么我们需要Q#?
- 第8章 函数探索
- [error]:启用sqlserver配置管理器异常,内存不足
- 覆盖电商、推荐、ETL、风控等多场景,网易的实时计算平台做了啥?
- linux系统怎么装锐捷,Linux锐捷上网安装过程
- Linux系统安装Oracle 10g
- java 小型超市管理系统_基于jsp的小型超市管理系统-JavaEE实现小型超市管理系统 - java项目源码...
- vue中使用video-player和百度地图
- canvas学习之-七色板
- 极飞亮相世界无人机大会,创始人彭斌讲述农业无人机的未来
- Angular入门到精通系列教程(14)- Angular 编译打包 Docker发布