canvas之画板简单功能实现
时间:2022-06-08
本文章向大家介绍canvas之画板简单功能实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
画板简单功能实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画板原理升级版</title>
<style>
*{
padding:0;
margin:0;
}
canvas{
background:#7B68EE;
}
</style>
</head>
<body>
<h1>画板效果改良版</h1>
<input type="color" id="cor" value="#26ffff">
<input type="range" id="cuxi" min='1' max='50' value='15' step='1s'><span>15</span><button type="button" id="clear">橡皮擦</button><br>
<br>
<br>
<canvas id="canvas" width="900" height="500"></canvas>
<script>
var cor=document.getElementById('cor');
var cuxi=document.getElementById('cuxi');
var clear=document.getElementById('clear');
var span=document.getElementsByTagName('span')[0];
//获得画板
var c=document.getElementById('canvas');
//获得绘画环境
var cv=c.getContext('2d');
//指定线条样式
cv.strokeStyle='#26ffff';
cv.lineWidth=15;
// cv.beginPath();
// cv.moveTo(0,0);
// cv.lineTo(100,500);
// cv.stroke();
//给画板新增按下事件
c.onmousedown=function(e){
//获取事件对象
var ev=window.event||e;
//获取事件源的位置
var old_left=ev.layerX||ev.offsetX;
var old_top=ev.layerY||ev.offsetY;
// alert('你按下的位置是:'+old_left+','+old_top);
cv.beginPath();//开启路径
cv.moveTo(old_left,old_top);//起始点位置
//给画板(鼠标)添加移动事件
c.onmousemove=function(e){
//获取事件对象
var ev=window.event||e;
//获取移动后事件源位置
var now_left=ev.layerX||ev.offsetX;
var now_top=ev.layerY||ev.offsetY;
// document.title=now_left+','+now_top;测试位置移动后坐标
cv.lineTo(now_left,now_top);//移动结束位置
cv.stroke();//闭合路径
}
}
//,鼠标抬起,取消鼠标移动事件
c.onmouseup=function(){
c.onmousemove=null;
}
//给颜色加改变事件
cor.onchange=function(){
cv.strokeStyle=this.value;
}
//给线条粗细控制的滑块加事件
cuxi.onchange=function(){
cv.lineWidth=this.value;
span.innerHTML=cuxi.value;//span显示当前线条的粗细值
}
//给橡皮按钮加事件
clear.onclick=function(){
alert('尽情的擦黑板吧');
cv.strokeStyle="#7B68EE";
}
</script>
</body>
</html>
具体的内容都包含注释内容了,包含了线条颜色可以获取input内的颜色value值,线条粗细使用range的value控制
橡皮功能真实效果是把线条的颜色修改背景色,产生错乱,被清除之前的内容结束鼠标按下事件进行线条绘制,移动鼠标出现线条路径,当没有点击鼠标,将移动事件取消,不会实现线条,满足鼠标按下和移动鼠标才能进行线条绘制!
- P3227 [HNOI2013]切糕
- python常见模块之random模块
- P2756 飞行员配对方案问题
- P1151 子数整数
- python常见模块之time模块
- U10783 名字被和谐了
- BZOJ 1174: [Balkan2007]Toponyms
- 1355: [Baltic2009]Radio Transmission
- Equation Group(方程式组织)
- Python中下划线---完全解读
- python常见模块之collections模块
- MYSQL之库操作
- 实战-如何获取安卓iOS上的微信聊天记录、通过Metasploit控制安卓
- lightswitch binding custom control
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring多数据源事务如何玩? | Spring系列46篇
- 使用Mfuzz包做时间序列分析
- 网络安全 | 瑞哥带你全方位解读防火墙技术!
- 【SpringBoot DB 系列】Jooq 之新增记录使用姿势
- 突击并发编程JUC系列-并发工具 Semaphore
- 构建Linux根文件系统
- ARM指令ldr和adr的区别
- 挂载文件系统出现"kernel panic..." 史上最全解决方案
- 汇编程序调用c函数为什么需要设置栈?
- Uboot到底如何启动内核
- Flink部署及作业提交(On YARN)
- Flink部署及作业提交(On Flink Standalone)
- MySQL题集
- 《深入浅出SQL》问答录
- Python_字典实现简单预约系统