今天学习了canvas,利用它做了一个简易版的画板,校验自己所学的知识,分享出来以供大家学习指教。先上效果图。

主要是使用了canvas的stroke和clearReact来实现画板的绘画和橡皮擦功能,然后通过监听鼠标的按下、移动、弹起事件,完成绘画及擦除功能。直接上才艺代码

html:

在这里的代码看不到,不支持canvas的浏览器可以看到

css:

body {

}

#c1 {

}

.active {

}

javascript:

var oC = document.getElementById(‘c1’) //获取canvas容器
var ctx = oC.getContext(‘2d’) //生成画笔
var num = 0; //通过num的值,判断是画笔还是橡皮擦
var aInput = document.getElementsByTagName(‘input’); //获取按钮dom元素

for (var i = 0; i < aInput.length; i++) {
aInput[i].index = i //给dom元素添加自定义属性
aInput[i].onclick = function () {
for (var i = 0; i < aInput.length; i++) {
aInput[i].className = ‘’ //将class清空
}
this.className = ‘active’ //点击的按钮样式置为active
num = this.index //更改状态
}
}

oC.onmousedown = function (e) {
var x = e.pageX - oC.offsetLeft; //获取坐标x值
var y = e.pageY - oC.offsetTop; //获取坐标y值
ctx.beginPath();
ctx.moveTo(x, y)
oC.onmousemove = function (e) {
var x = e.pageX - oC.offsetLeft;
var y = e.pageY - oC.offsetTop;
if (num == 0) {
ctx.lineTo(x, y);
ctx.stroke();
} else if (num == 1) {
ctx.clearRect(x, y, 20, 20)
}
}
oC.onmouseup = function (e) {
oC.onmousemove = null;
oC.onmouseup = null;
ctx.closePath();
}
}

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118612183

canvas简易画布的更多相关文章

  1. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  2. HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

  3. 安卓自定义View进阶-Canvas之画布操作 转载

    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...

  4. canvas简易画板。

    在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById(' ...

  5. h5-10 canvas 简易祖玛

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. (网页)html5 canvas清空画布方法(转)

    总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() { v ...

  7. canvas简易画板

    代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. canvas:画布

    画布有默认宽度,如果要自己设置宽带要写在属性上 列: <canvas id = "myCanvas" width = "600" height = &qu ...

  9. Canvas对画布及文字控制基础API学习

    这次纯API练习,比较简单,但是是为了之后的结合项目打基础的,所以也不能忽视它,下面开始: Canvas的平移.旋转.缩放 这里还是以上次画那个青春痘的DEMO为例[http://www.cnblog ...

随机推荐

  1. 为什么说TCP协议是可靠的?

    TCP 实现可靠通信的两种方式 我们都知道 IP 协议是"不太靠谱".因为 IP 协议是不可靠的,所以 IP 数据包可能在传输过程中发生错误或者丢失.这就意味着,TCP 协议不得不 ...

  2. maven jar包冲突问题

    之前好端端的项目没做任何改动maven依赖就报红?jar包冲突?不要慌,问题不大. idea file里面点击invalidate Caches/Restart清空项目缓存并重启,ok解决问题.

  3. python基础练习题(题目 三数排序。)

    day40 --------------------------------------------------------------- 实例066:三数排序 题目 输入3个数a,b,c,按大小顺序 ...

  4. 关于openstreet map的osm文件转shp文件方法(附arcgis10.2插件)

    一.下载并安装对应arcgis版本的osm插件 对应arcgis版本的osm转换插件在arcgis官网可以下载 http://www.arcgis.com/home/search.html?q=Arc ...

  5. 彻底解决Failed to execute goal on project xxxxx

    1.错误内容:Could not resolve dependencies for project 今天在使用mvn clean package命令对一个子项目打包的时候出现如下错误(但是使用mave ...

  6. 干货 | 亿级Web系统负载均衡几种实现方式

    一个执着于技术的公众号 负载均衡(Load Balance)是集群技术(Cluster)的一种应用技术.负载均衡可以将工作任务分摊到多个处理单元,从而提高并发处理能力.目前最常见的负载均衡应用是Web ...

  7. HCNP Routing&Switching之RSTP

    前文我们了解了vlan优化,vlan聚合技术super vlan相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16208997.html:今天我们来聊 ...

  8. 百万数据 mysql count(*)优化

    一.故事背景有一张 500w 左右的表做 select count(*) 速度特别慢. 二.原 SQL 分析Server version: 5.7.24-log MySQL Community Ser ...

  9. 1903021121-刘明伟 实验二 JAVA第2周作业—代码插入

    项目 内容 课程班级博客链接 19信计班(本)  作业要求链接  第2周作业 要求 截图(只截运行结果) 扩展阅读 https://www.cnblogs.com/thelovelybugfly/p/ ...

  10. MongoDB是什么?非关系型数据库的优点?安装使用教程

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,由于球姐都有孩子了, ...