JS画图板Demo

最新推荐文章于 2024-05-10 09:50:54 发布
最新推荐文章于 2024-05-10 09:50:54 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： JavaScript
原文链接：http://www.jq22.com/webqd1418
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js做的画板-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
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>
        </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>

<script>
 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);
     }

 }
</script>

</body>
</html>

 

如果没有_明天
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现canvas在线画板
A20201130的博客
02-21 2933
一、前言 canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。 二、实现效果 今天这个canvas小案例主要是四个功能 1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板 三、代码实现 1.html+css部分代码 <style> canvas{ background-colo..
收藏几个用纯JS实现的简易绘图板
听雨轩
01-05 666
见附件。
探索与创作的乐园：drawingboard.js
最新发布
gitblog_00045的博客
05-10 350
探索与创作的乐园：drawingboard.js 项目地址:https://gitcode.com/manuhabitela/drawingboard.js 项目简介 是否曾想过在网页上构建一个简易画板，让访客可以随心所欲地挥洒创意？现在，这一切变得轻而易举，只需集成drawingboard.js。这个基于HTML5 <canvas> 的画板应用，提供了丰富的交互功能，包括颜色选择、画...
html5 的 canvas 想写个小项目 画板
qq253113827的专栏
05-23 2998
最近在研究下 html5 的 canvas 想写个小项目，练练手，结果写了一个画图板，功能点有 绘制、直线、圆、方形、涂鸦、线条粗细、颜色切换、撤销、回退、保存、下载、外部图片拖入等 ， 用的技术是包含 html5 中的本地存储、下载、canvas 等技术，上图。 演示地址：http://chengxinwei.github.io/html5/2013/06/20/HTML5
基于zepto.js的canvas简易画图板
zml_2622798617的博客
01-17 1387
基于zepto.js的canvas简易画图板主要实现清空画图板功能，实现撤销返回上一步功能！（各个步骤均有注释哦！）
canvas 移动端画板批注pdf预览
05-12
canvas 移动端画板批注pdf预览 用了get请求pdf文件，服务器下运行才会生效 画板移动端下才生效
画图demo（egret）
11-27
"画图demo（egret）"是一个使用Egret引擎实现的简单画板应用程序，它允许用户进行绘画操作，具有橡皮擦功能、颜色选择以及清空画板等特性。下面我们将深入探讨这个项目的相关知识点。 首先，Egret引擎的核心是它的...
微信小程序 Canvas 画板、签名板Demo
10-12
总结来说，"微信小程序 Canvas 画板、签名板Demo"是一个综合运用了微信小程序API、Canvas绘图技术和交互设计的实例，它不仅展示了如何在小程序中创建交互式的画板功能，也为我们提供了学习和参考的样本。通过深入...
gojs的流程图模型demo下载，自定义流程节点
02-09
GoJS是一种强大的JavaScript库，专为构建交互式和可自定义的图表而设计，尤其适合创建流程图。在这个"GoJS的流程图模型demo下载，自定义流程节点"中，我们将会探讨如何利用GoJS来构建流程图，并实现节点的自定义。 ...
vue-konva-demo2
11-22
在这个名为"vue-konva-demo2"的项目中，我们将探讨如何结合Vue.js与Konva.js库创建一个简单的画图工具。 Konva.js是一个强大的2D绘图库，适用于浏览器环境，它提供了丰富的图形绘制和操作功能。通过集成Konva到Vue...
配电图编辑器demo版本
05-08
GoJS是一个专门用于构建交互式图表和图形界面的JavaScript库，尤其适合在浏览器环境中创建复杂的图形布局。这款demo版本的编辑器是为设计人员量身定制的，旨在简化配电图的设计过程，提供高操作性的用户体验。 一、...
js画图工具
04-10
js画图工具，支持正方形、圆形、折现、菱形画图，封装比较简单，需要用到的朋友可以自己扩展！
JSPaint一个用JS实现类似于windows的画图工具
08-10
JS Paint一个用JS实现类似于windows的画图工具
D3.js学习03_画布使用
flora_zhl的博客
06-15 844
学习参考：【 D3.js 入门系列 — 3 】 做一个简单的图表！ 【SVG】可缩放矢量图形（Scalable Vector Graphics） 【Canvas】用于绘制位图 【匿名函数function(d,i)】“d”表示绑定的数据，“i”表示索引 【代码】
fabric.js和高级画板
weixin_34037515的博客
04-04 2489
本文介绍fabric.js框架使用，以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式、网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形 文字输入 图片展示及相关移动、缩放等操作 删除功能 （文末附：画板GitHub地址&amp;fabric.js使用秘籍） 功能截图如下...
HTML5 canvas实现画板功能
SiaEyre
05-14 5398
HTML5新标签： <canvas></canvas>定义画布，需要配合js完成功能。在canvas标签内部的内容为不支持canvas时显示的内容。行内样式width与height设置画布大小。用css设置画布大小，可能会导致<canvas>元素中展示的内容变形。 <input type = "color"> 定义拾色器 <input t...
js画布组件(<canvas></canvas>)
weixin_33857679的博客
10-08 180
一、Canvas是什么？ Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。 二、Canvas重要Context对象 (1)要使用Canvas来绘制图形必须在页面中添加Canvas的标签。 ...
fabric实现文本聚焦、可编辑
weixin_34268310的博客
11-10 2060
var canvas = new fabric.Canvas('c'); var tex = new fabric.IText('click',{left:100,top:400});canvas.add(tex);tex.enterEditing();tex.hiddenTextarea.focus(); 转载于:https://www.cnblogs.com/family-626-77/p/...
C语言实现简易画图板
"C语言实现的简易画图板" 在计算机编程领域，C语言因其高效、灵活和广泛的系统级支持而被广泛使用。本项目利用C语言的MFC（Microsoft Foundation Classes）库，实现了一个简单的画图板应用。MFC是微软提供的一套...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值