canvas简易画布
今天学习了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简易画布的更多相关文章
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
- 安卓自定义View进阶-Canvas之画布操作 转载
安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...
- canvas简易画板。
在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById(' ...
- h5-10 canvas 简易祖玛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (网页)html5 canvas清空画布方法(转)
总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() { v ...
- canvas简易画板
代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- canvas:画布
画布有默认宽度,如果要自己设置宽带要写在属性上 列: <canvas id = "myCanvas" width = "600" height = &qu ...
- Canvas对画布及文字控制基础API学习
这次纯API练习,比较简单,但是是为了之后的结合项目打基础的,所以也不能忽视它,下面开始: Canvas的平移.旋转.缩放 这里还是以上次画那个青春痘的DEMO为例[http://www.cnblog ...
随机推荐
- 一致性Hash的原理与实现
应用场景 在了解一致性Hash之前,我们先了解一下一致性Hash适用于什么场景,能解决什么问题?这里先放一下我自己认为适用的场景.一致性Hash适用于服务器动态扩展且需要负载均衡的场景 试想以下场景, ...
- NodeJs学习日报day9——操作数据库
const mysql = require('mysql') const db = mysql.createPool({ // 数据库的ip地址 host: 'localhost', user: 'r ...
- 搜索与图论②--宽度优先搜索(BFS)
宽度优先搜索 例题一(献给阿尔吉侬的花束) 阿尔吉侬是一只聪明又慵懒的小白鼠,它最擅长的就是走各种各样的迷宫. 今天它要挑战一个非常大的迷宫,研究员们为了鼓励阿尔吉侬尽快到达终点,就在终点放了一块阿尔 ...
- 对比学习 ——simsiam 代码解析。
目录 1 : 事先准备 . 2 : 代码阅读. 2.1: 数据读取 2.2: 模型载入 3 训练过程: 4 测试过程: 5 :线性验证 6 : 用自己数据集进行对比学习. 第一: 改数据集 : ...
- CVPR 2022数据集汇总|包含目标检测、多模态等方向
前言 本文收集汇总了目前CVPR 2022已放出的一些数据集资源. 转载自极市平台 欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结.最新技术跟踪.经典论文解读.CV招聘信息. M5Produc ...
- MySQL免安装版发生系统错误 1067
使用MySql免安装版启动时1067 解决办法 打开安装的文件夹 找到my.ini的mysqld模块,调整参数位置. 3. 重新启动Mysql服务 net start mysql
- MySQL 5.0安装教程图解详细教程
步骤4.在"Developer Components(开发者部分)"上左键单击,选择"This feature, and all subfeatures, will be ...
- XCTF练习题---MISC---Training-Stegano-1
XCTF练习题---MISC---Training-Stegano-1 flag:steganoI 解题步骤: 1.观察题目,下载附件 2.打开下载的图片文件,发现就是一个点,修改文件扩展名,还是说查 ...
- ViewFlipper 简单应用
AdvserView.java package com.earen.viewflipper; import android.content.Context; import android.graphi ...
- clion 预编译文件的查看
看了一圈网上也没有我能一下就能看的懂的配置教程 我就手打一篇给在用clion的同学来参考一下 本文适用于g++编译 cmake Ninja生成器 clion 默认使用的是CMAKE来构建程序 生成器用 ...