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控制

橡皮功能真实效果是把线条的颜色修改背景色,产生错乱,被清除之前的内容结束鼠标按下事件进行线条绘制,移动鼠标出现线条路径,当没有点击鼠标,将移动事件取消,不会实现线条,满足鼠标按下和移动鼠标才能进行线条绘制!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏androidBlog

常用的自定义View例子一(流布式布局)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

7710
来自专栏Android干货园

Android带你解析ScrollView--仿QQ空间标题栏渐变

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/52...

25310
来自专栏封碎

Android画图之抗锯齿 博客分类: Android小技巧 Android

    在画图的时候,图片如果旋转或缩放之后,总是会出现那些华丽的锯齿。其实Android自带了解决方式。     方法一:给Paint加上抗锯齿标志。然后将...

27720
来自专栏Golang语言社区

【Go 语言社区】 H5 APP 前端开发专业的 HTML 5 Canvas

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canva...

30860
来自专栏DeveWork

WordPress 编辑器快捷键——让写作来得更方便些吧!

偶然在网络上看到的,所以转载在本站DeveWork.com 。这个是默认编辑器的快捷键,也很好记,有了这个,就能更加方便进行写作了。据说现在Markdown 语...

30050
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

12320
来自专栏Android源码框架分析

Android自定义View:MeasureSpec的真正意义与View大小控制

自定义View是Android开发中最普通的需求,灵活控制View的尺寸是开发者面临的第一个问题,比如,为什么明明使用的是WRAP_CONTENT却跟MATCH...

14920
来自专栏我的博客

JS动态添加表单

<script type=”text/javascript”> function addRow()<!–js实现添加一行内容!–> { var tr=docum...

39360
来自专栏我分享我快乐

HTML5常用的标签

目录: HTML5新结构标签 HTML5新其他标签 HTML5新input类型 HTML5新属性 HTML5高级应用 html4和html5对比: Html4代...

34980
来自专栏林德熙的博客

win10 UWP 动画 动画入门

在 UWP 移动元素的动画,可以使用 RenderTransform 移动,然后使用动画修改 RenderTransform 进行动画。关于元素移动,请看 wi...

27810

扫码关注云+社区

领取腾讯云代金券