基于html+JS实现canvas简易画图工具

使用canvas来创建区域，建立核心对象，再接着分别获取几个按钮的节点，确定鼠标按下的起始位置，和鼠标释放时的位置，并为其加上移动事件，鼠标松开时则删除移动节点。点击清除画布按钮，使用clearRect清除画布。

代码如下，注释在其内，请君一阅。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易画图工具</title>
</head>
<style>section {width: 700px;}h1 {text-align: center;}canvas {margin-bottom: 20px;}aside{text-align: center;}aside>input{margin-right: 20px;}
</style><body><section><h1>简易画图工具</h1><canvas id="canNode" width="700px" height="400px"></canvas><aside><input type="button" value="清除画布" class="clear"><input type="color" class="yanse"><input type="range" min="1" max="10" class="cuxi"></aside></section><script src="./hua.js"></script>
</body></html>

canNode.style.border = "3px solid red";
let pen = canNode.getContext("2d");
console.log(canNode.clientWidth, canNode.clientHeight);//canvas标签的填充盒尺寸  700、400
console.log(canNode.offsetLeft, canNode.offsetTop);//canvas节点距左侧和顶部的距离  8、72//获取按钮节点
let clearEle = document.getElementsByClassName("clear")[0];
let colEle = document.getElementsByClassName("yanse")[0];
let cuxiEle = document.getElementsByClassName("cuxi")[0];//鼠标按下时
canNode.addEventListener("mousedown", function (e) {let event = e || window.event;//获取鼠标起始位置let x1 = event.clientX - canNode.offsetLeft;let y1 = event.clientY - canNode.offsetTop;// console.log(event.offsetX, event.offsetY);// console.log(event.clientX, event.clientY);// console.log(event.clientX - canNode.offsetLeft, event.clientY - canNode.offsetTop);pen.beginPath();pen.moveTo(x1, y1);//鼠标移动时进行绘画canNode.addEventListener("mousemove", hua);//鼠标松开时则删除移动节点canNode.addEventListener("mouseup", function () {canNode.removeEventListener("mousemove", hua);});
});//绘画移动
function hua(e) {let event = e || window.event;let x2 = event.offsetX;let y2 = event.offsetY;pen.lineTo(x2, y2);pen.strokeStyle = colEle.value;pen.lineWidth = cuxiEle.value;pen.stroke();
}//清除画布
clearEle.addEventListener("click", function () {pen.clearRect(0,0,canNode.clientWidth, canNode.clientHeight);
});

基于html+JS实现canvas简易画图工具相关推荐

JS实现简易画图工具
[Canvas]画布 Canvas为HTML5中新加入的标签, JS 可在上面进行绘画,Canvas一个矩形的单元.Canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 绘制图形的步骤 ...
怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
图片怎么转为html5,将图片转化为矢量并canvas化的容易工具(基于Node.js + HTML5 canvas)...
将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas) 一.前言最近需要做一个图标的矢量化,但是没有数据,因此采用了node.js作为数据处理工具,canva ...
简易画图工具(Python)
简易画图工具(Python) 小黑最近在努力的入门python,正好学习到了Python的tkinker模块下的Canvas(画布)和Button(按钮)再加上相应的事务管理,实现了一个简单的画图小工 ...
认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具...
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
HTML5Canvas实现简易画图工具（铅笔，直线，矩形，圆，文本框，橡皮擦等）
初学Canvas,用canvas做了简单的画图工具体会并熟悉了一下大致的实现方案.开发完也算是基本了解canvas的用法了. HTML部分: <div class="app" ...
html5 canvas 制作画图工具。
html5比起之前最大的进步之一,就是引入了canvas标签.canvas 顾名思义,是个画布,我们可以通过脚本语言(javascript),来操作canvas,画出各种各样的图案. 既然是画布,那就 ...
java简易画图工具_求Java简单画图工具
展开全部 ///保存一个pb.java文件直接编译执e68a8462616964757a686964616f31333262363631行 import java.applet.*; import j ...

基于html+JS实现canvas简易画图工具

基于html+JS实现canvas简易画图工具相关推荐

最新文章

热门文章