JS + Canvas画图Demo
直接上代码，复制粘贴就能用：
HTML代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="Public/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
canvas {
background:#ccc;
display:block;
margin:0 auto;
}
#controls {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:linear-gradient(to bottom,#000000,#b8b8b8);
user-select:none;
}
#controls section {
margin-top:10px;
height:20px;
}
#controls .label {
width:50%;
height:20px;
line-height:20px;
text-align:center;
color:#FFF;
display:block;
float:left;
}
#xing {
float:right;
width:50%;
height:20px;
}
/*#shape {
*/
/*width:50%;
height:20px;
display:block;
*/
/*
}
*/
#controls .color {
width:50%;
height:auto;
float:right;
}
#colors input {
float:right;
width:48%;
height:20px;
border:none;
}
#widths input {
float:right;
width:49%;
height:20px;
border:none;
}
#style {
float:right;
width:49%;
height:20px;
border:none;
}
input[type=button] {
width:150px;
height:30px;
background:#C40000;
color:#FFF;
border-radius:5px;
margin-top:10px;
margin-left:10px;
border:none;
display:block;
}
</style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<div id="controls">
<section id="shape">
<label for="shape" class="label">选择形状 : </label>
<select id="xing">
<option value="rect">矩形</option>
<option value="line">直线</option>
<option value="circle">内切圆</option>
<option value="circle1">外接圆</option>
<option value="circle2">中心圆</option>
<option value="poly">多边形</option>
<option value="pen">铅笔</option>
<option value="eraser">橡皮</option>
<option value="arrow">箭头</option>
</select>
</section> <section id="colors">
<label for="color" class="label">选择颜色 : </label>
<input type="color" id="color">
</section>
<section id="widths">
<label for="color" class="label">选择线宽 : </label>
<input type="number" id="width" value="2" step="2" min="2" max="20">
</section>
<section id="styles">
<label for="shape" class="label">选择方式 : </label>
<select id="style">
<option value="stroke">描边</option>
<option value="fill">填充</option>
</select>
</section>
<section id="sides">
<label for="side" class="label">选择边数 : </label>
<input type="number" id="side" value="3" min="3" max="20">
</section>
<input type="button" value="撤销" id="redo">
<input type="button" value="保存" id="save">
<input type="button" value="清空" id="qingkong">
</div>
</body>
</html>
JS代码：
var canvas = document.querySelector("canvas");
var cobj = canvas.getContext("2d");
var shape = document.querySelector("#xing");
var color = document.querySelector("#color");
var width = document.querySelector("#width");
var style = document.querySelector("#style");
var side = document.querySelector("#side");
var redo = document.querySelector("#redo");
var save = document.querySelector("#save");
var qingkong = document.querySelector("#qingkong");
console.log(side);
var data = [];
var s = "rect";
shape.onchange = function() {
s = this.value;
};
var c = "#000";
color.onchange = function() {
c = this.value;
};
var w = "2";
width.onchange = function() {
w = this.value;
};
var st = "stroke";
style.onchange = function() {
st = this.value;
};
var sd = "3";
side.onchange = function() {
sd = this.value;
};
canvas.onmousedown = function(e) {
var ox = e.offsetX;
var oy = e.offsetY;
var draw = new Draw(cobj, {
color: c,
width: w,
style: st,
side: sd
});
if (s == "pen") {
cobj.beginPath();
cobj.moveTo(ox, oy);
}
canvas.onmousemove = function(e) {
var mx = e.offsetX;
var my = e.offsetY;
if (s != "eraser") {
cobj.clearRect(0, 0, 500, 500);
if (data.length != 0) {
cobj.putImageData(data[data.length - 1], 0, 0, 0, 0, 500, 500); //将某个图像数据放置到画布指定的位置上 后面四个参数可省略
}
}
// cobj.strokeRect(ox,oy,mx-ox,my-oy);
// cobj.beginPath()
draw[s](ox, oy, mx, my, sd);
};
document.onmouseup = function() {
data.push(cobj.getImageData(0, 0, 500, 500)); //获取画布当中指定区域当中所有的图形数据
canvas.onmousemove = null;
document.onmouseup = null;
}
};
redo.onclick = function() {
if (data.length == 0) {
alert("无效操作");
return;
}
cobj.clearRect(0, 0, 500, 500);
data.pop();
if (data.length == 0) {
return;
}
cobj.putImageData(data[data.length - 1], 0, 0, 0, 0, 500, 500);
};
save.onclick = function() {
var r = canvas.toDataURL();
location.assign(r)
};
qingkong.onclick = function() {
cobj.clearRect(0, 0, 500, 500);
data = [];
}
class Draw {
constructor(cobj, option) {
this.cobj = cobj;
this.color = option.color;
this.width = option.width;
this.style = option.style;
}
init() { //初始化
this.cobj.strokeStyle = this.color;
this.cobj.fillStyle = this.color;
this.cobj.lineWidth = this.width;
}
rect(ox, oy, mx, my) {
this.init();
this.cobj.beginPath();
this.cobj.rect(ox, oy, mx - ox, my - oy);
this.cobj[this.style]();
}
line(ox, oy, mx, my) {
this.init();
this.cobj.beginPath();
this.cobj.moveTo(ox, oy);
this.cobj.lineTo(mx, my);
this.cobj.stroke();
}
circle(ox, oy, mx, my) { //内切圆
this.init();
this.cobj.beginPath();
/* var r=Math.sqrt(Math.pow(mx-ox,2)+Math.pow(my-oy,2))/2;
this.cobj.arc(ox+(mx-ox)/2,oy+(my-oy)/2,r,0,2*Math.PI);*/
var r = Math.abs(mx - ox) > Math.abs(my - oy) ? Math.abs(my - oy) / 2 : Math.abs(mx - ox) / 2;
this.cobj.arc(ox + (ox < mx ? r : -r), oy + (oy < my ? r : -r), r, 0, 2 * Math.PI);
this.cobj[this.style]();
}
circle1(ox, oy, mx, my) { //外接圆
this.init();
this.cobj.beginPath();
var r = Math.sqrt(Math.pow(mx - ox, 2) + Math.pow(my - oy, 2)) / 2;
this.cobj.arc(ox + (mx - ox) / 2, oy + (my - oy) / 2, r, 0, 2 * Math.PI);
this.cobj[this.style]();
}
circle2(ox, oy, mx, my) { //中心圆
this.init();
this.cobj.beginPath();
var r = Math.sqrt(Math.pow(mx - ox, 2) + Math.pow(my - oy, 2));
this.cobj.arc(ox, oy, r, 0, 2 * Math.PI);
this.cobj[this.style]();
}
poly(ox, oy, mx, my, sd) {
this.init();
this.cobj.save();
cobj.translate(ox, oy);
this.cobj.rotate(Math.PI / 2);
var angle = Math.PI / sd;
var r = Math.sqrt(Math.pow(mx - ox, 2) + Math.pow(my - oy, 2));
var x = Math.cos(angle) * r;
var y = Math.sin(angle) * r;
this.cobj.beginPath();
this.cobj.moveTo(x, y);
for (var i = 0; i < sd; i++) {
this.cobj.lineTo(x, -y);
this.cobj.rotate(-angle * 2)
}
this.cobj[this.style]();
this.cobj.restore()
}
pen(ox, oy, mx, my) {
this.init();
this.cobj.lineTo(mx, my);
this.cobj.stroke();
}
eraser(ox, oy, mx, my) {
this.cobj.clearRect(mx, my, 10, 10);
}
arrow(ox, oy, mx, my){//箭头工具
this.init();
beginPoint.x = ox;
beginPoint.y = oy;
stopPoint.x = mx;
stopPoint.y = my;
Plot.arrowCoord(beginPoint, stopPoint);
Plot.sideCoord();
Plot.drawArrow();
}
}
var beginPoint = {};//画箭头需要的开始坐标
var stopPoint = {};//画箭头需要的结束坐标
var polygonVertex = [];//箭头多边形顶点的坐标
var CONST = {//箭头参数
edgeLen: 50,
angle: 25
};
//封装的作图箭头工具对象
var Plot = {
angle: "",
//在CONST中定义的edgeLen以及angle参数
//短距离画箭头的时候会出现箭头头部过大，修改：
dynArrowSize: function() {
var x = stopPoint.x - beginPoint.x,
y = stopPoint.y - beginPoint.y,
length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
if (length < 250) {
CONST.edgeLen = CONST.edgeLen/2;
CONST.angle = CONST.angle/2;
}
else if(length<500){
CONST.edgeLen=CONST.edgeLen*length/500;
CONST.angle=CONST.angle*length/500;
}
// console.log(length);
},
//getRadian 返回以起点与X轴之间的夹角角度值
getRadian: function(beginPoint, stopPoint) {
Plot.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
//console.log(Plot.angle);
paraDef(50,40);
Plot.dynArrowSize();
},
///获得箭头底边两个点
arrowCoord: function(beginPoint, stopPoint) {
polygonVertex[0] = beginPoint.x;
polygonVertex[1] = beginPoint.y;
polygonVertex[6] = stopPoint.x;
polygonVertex[7] = stopPoint.y;
Plot.getRadian(beginPoint, stopPoint);
polygonVertex[8] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle + CONST.angle));
polygonVertex[9] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle + CONST.angle));
polygonVertex[4] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle - CONST.angle));
polygonVertex[5] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle - CONST.angle));
},
//获取另两个底边侧面点
sideCoord: function() {
var midpoint = {};
// midpoint.x = polygonVertex[6] - (CONST.edgeLen * Math.cos(Plot.angle * Math.PI / 180));
// midpoint.y = polygonVertex[7] - (CONST.edgeLen * Math.sin(Plot.angle * Math.PI / 180));
midpoint.x=(polygonVertex[4]+polygonVertex[8])/2;
midpoint.y=(polygonVertex[5]+polygonVertex[9])/2;
polygonVertex[2] = (polygonVertex[4] + midpoint.x) / 2;
polygonVertex[3] = (polygonVertex[5] + midpoint.y) / 2;
polygonVertex[10] = (polygonVertex[8] + midpoint.x) / 2;
polygonVertex[11] = (polygonVertex[9] + midpoint.y) / 2;
},
//画箭头
drawArrow: function() {
cobj.beginPath();
cobj.moveTo(polygonVertex[0], polygonVertex[1]);
cobj.lineTo(polygonVertex[2], polygonVertex[3]);
cobj.lineTo(polygonVertex[4], polygonVertex[5]);
cobj.lineTo(polygonVertex[6], polygonVertex[7]);
cobj.lineTo(polygonVertex[8], polygonVertex[9]);
cobj.lineTo(polygonVertex[10], polygonVertex[11]);
// cobj.lineTo(polygonVertex[0], polygonVertex[1]);
cobj.closePath();
cobj.fill();
}
};
//自定义参数
function paraDef(edgeLen, angle) {
CONST.edgeLen = edgeLen;
CONST.angle = angle;
}
效果图：
原文链接：http://www.jq22.com/webqd1418
JS + Canvas画图Demo的更多相关文章
- SVG和canvas画图，js求数组最大最小值
windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...
- js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）
js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片) 一.总结 一句话总结:万能的wPaint方法,通过不同的参数执行不同的操作.比如清空画布参数传"clear& ...
- 【JavaScript】操作Canvas画图
1.页面添加 Canvas 标签 标签内可以写文字,浏览器不支持Canvas的情况下显示, 2.js获取 Canvas 标签 3.利用js函数画图,[线][图][文字] 源:http://www.li ...
- html5之canvas画图基础
HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
- Canvas画图在360浏览器中跑偏的问题
问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 转 原生js canvas实现苹果电脑mac OS窗口最小化效果
http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458 很多资料 ,前 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- chart.js & canvas
chart.js & canvas https://www.chartjs.org/samples/latest/ https://www.chartjs.org/samples/latest ...
随机推荐
- Solr搜索引擎【索引提交、事务日志、原子更新】
一.索引提交 当一个文档被添加到Solr中,但没有提交给索引之前,这个文档是无法被搜索的.换句话说,从查询的角度看,文档直到提交之后才是可见的.Solr有两种类型的提交:软提交和正常提交[也称硬提交] ...
- 从别人那里拿过来的工程，在Idea上打开时报错
如果是这个错误:也许原因有很多种,但是不妨试一下⑴将给你项目工程的人的.idea文件夹删除,这样在你导入工程时,会生成一个属于你本地的.idea.⑵最好是使用SVN重新把项目工程检出(把项目下载下来, ...
- VLAN实验5（在ensp上利用三层交换机实现VLAN间路由）
原理概述: VLAN将一个物理的LAN在逻辑上划分成多个广播域.VLAN内的主机间可以直接通信,而VLAN间不能直接互通. 在现实网络中,经常会遇到需耍跨VLAN相互访问的情况,工程师通常会选择一些方 ...
- 第二周选做（myod）
02.第二周myod(选做) 实验要求: 复习c文件处理内容 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Mak ...
- cluster模块设置子进程的stdio
原因 子进程的stdout及stderr需要被设置为某个文件,根据文档 setupMaster 说明,需要设置stdio数组: c.setupMaster({ exec: `${cwd}/c.js`, ...
- std::unique_ptr的用法
std::ofstream("demo.txt") << 'x'; // 准备要读的文件 { std::unique_ptr<std::FILE, decltyp ...
- 【实用工具】使用Java封装可执行exe应用全过程
目录 编写java代码 打包 创建exe文件 压缩 总结 本文将使用exe4j将java项目封装为可以发送给他人使用的工具为例,来记录将java项目封装为exe文件的全过程 编写java代码 目标:创 ...
- SDCycleScrollView-简单的循环
cocoapods 导入SDCycleScrollView1 记得使用 SDWebImage 2 SDCycleScrollViewDelegate _cycleScrollerView = [SDC ...
- NIM游戏，NIM游戏变形，威佐夫博弈以及巴什博奕总结
NIM游戏,NIM游戏变形,威佐夫博弈以及巴什博奕总结 经典NIM游戏: 一共有N堆石子,编号1..n,第i堆中有个a[i]个石子. 每一次操作Alice和Bob可以从任意一堆石子中取出任意数量的石子 ...
- LCT（Link Cut Tree）总结
概念.性质简述 首先介绍一下链剖分的概念链剖分,是指一类对树的边进行轻重划分的操作,这样做的目的是为了减少某些链上的修改.查询等操作的复杂度.目前总共有三类:重链剖分,实链剖分和并不常见的长链剖分. ...