今天学习了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. 一致性Hash的原理与实现

    应用场景 在了解一致性Hash之前,我们先了解一下一致性Hash适用于什么场景,能解决什么问题?这里先放一下我自己认为适用的场景.一致性Hash适用于服务器动态扩展且需要负载均衡的场景 试想以下场景, ...

  2. NodeJs学习日报day9——操作数据库

    const mysql = require('mysql') const db = mysql.createPool({ // 数据库的ip地址 host: 'localhost', user: 'r ...

  3. 搜索与图论②--宽度优先搜索(BFS)

    宽度优先搜索 例题一(献给阿尔吉侬的花束) 阿尔吉侬是一只聪明又慵懒的小白鼠,它最擅长的就是走各种各样的迷宫. 今天它要挑战一个非常大的迷宫,研究员们为了鼓励阿尔吉侬尽快到达终点,就在终点放了一块阿尔 ...

  4. 对比学习 ——simsiam 代码解析。

    ​  目录 1 : 事先准备 . 2 : 代码阅读. 2.1: 数据读取 2.2: 模型载入 3 训练过程: 4 测试过程: 5 :线性验证 6 : 用自己数据集进行对比学习. 第一:  改数据集 : ...

  5. CVPR 2022数据集汇总|包含目标检测、多模态等方向

    前言 本文收集汇总了目前CVPR 2022已放出的一些数据集资源. 转载自极市平台 欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结.最新技术跟踪.经典论文解读.CV招聘信息. M5Produc ...

  6. MySQL免安装版发生系统错误 1067

    使用MySql免安装版启动时1067 解决办法 打开安装的文件夹 找到my.ini的mysqld模块,调整参数位置. 3. 重新启动Mysql服务 net start mysql

  7. MySQL 5.0安装教程图解详细教程

    步骤4.在"Developer Components(开发者部分)"上左键单击,选择"This feature, and all subfeatures, will be ...

  8. XCTF练习题---MISC---Training-Stegano-1

    XCTF练习题---MISC---Training-Stegano-1 flag:steganoI 解题步骤: 1.观察题目,下载附件 2.打开下载的图片文件,发现就是一个点,修改文件扩展名,还是说查 ...

  9. ViewFlipper 简单应用

    AdvserView.java package com.earen.viewflipper; import android.content.Context; import android.graphi ...

  10. clion 预编译文件的查看

    看了一圈网上也没有我能一下就能看的懂的配置教程 我就手打一篇给在用clion的同学来参考一下 本文适用于g++编译 cmake Ninja生成器 clion 默认使用的是CMAKE来构建程序 生成器用 ...