画板、H5canvas制作画板源文件免费下载

不要羡慕作者的画画技术

<!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><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><link rel="stylesheet" href="./css/reset.css" type="text/css">
</head><style>*{margin:0;padding:0;}body{background: #000;}ul,ol{list-style: none;}article{width:600px;height:500px;margin:0 auto;border:20px solid rgb(124, 93, 57);border-radius:20px;background:rgb(124, 93, 57);}.box{width:500px;height:500px;float: left;position: relative;}#cv{background:#fff;cursor: pointer;}aside{width:80px;height:500px;/* border-left:10px solid rgba(124,93,57); */box-sizing: border-box;background: rgb(209, 157, 98);text-align:center;float:right;position: relative;}aside .tit{border-bottom:5px solid rgb(124, 93, 57);line-height:20px;width:80px;height:20px;float: left;}.list-box{width:80px;float: left;}.list-box li{width:100%;height:60px;border-bottom:5px solid rgb(124, 93, 57);display:flex;justify-content: center;align-items: center;}.list-box li img{cursor: pointer;}.list-box li:hover{background: rgb(179, 132, 79);}.list-box .on{background: rgb(179, 132, 79);}.debug{width:200px;height:150px;background: rgb(245, 188, 124);border:5px solid rgb(124,93,57);position:absolute;top:0px;left:102px;font-weight:bolder;}.debug .t-s{position:absolute;left:50%;top:25px;margin-left:-75px;width:150px;height:80px;background:aqua;cursor: pointer;border-radius:10px;}.debug .t-s li{width:100%;height:100%;position:absolute;top:0;left:0;background:rgb(235, 197, 114);border-radius:10px;display:flex;text-align: left;align-items: center;justify-content: center;}.col{width:0px;height:0px;border:none;position: relative;z-index:-1;}.colVal{width:20px;height:14px;position: relative;top:-3px;left:5px;font-size: 12px;text-align: center;}.range{width:80px;}.xpc{position: absolute;width:50px;height:50px;background:rgba(0,0,0,0.5);z-index:2;display: none;}.zz{width:100%;height:100%;position:absolute;top:0;left:0;cursor: move;z-index:5;display:none;}</style>
<body><article><div class="box"><div class="zz"></div><span class="xpc"></span><canvas id="cv" width="500" height="500"></canvas></div><aside><h4 class="tit">菜单</h4><ul class="list-box"><li class="hb on" title="画笔"> <img src="./img/hb.png" alt="画笔"> </li><li class="xp" title="橡皮擦"><img src="./img/xp.png" alt="橡皮擦"></li><li title="色板"><label for="col"><img src="./img/col.png" alt="色板"></label><input type="color" id="col" class="col"></li><li class="clearBox" title="清空">清空</li></ul><div class="debug"><p class="z-b">坐标(0,0)</p><ul class="t-s"><li> <p>大小: <input type="range" min='0' max="100" value="1" step="0" class="range"><input type="text" class="colVal" value="1"></p>                       </li></ul></div></aside></article>
</body><script>var flog = false;var flog1 = false;var c = document.getElementById("cv");var cxt = c.getContext("2d");cxt.lineWidth = $(".range").val();$(".col").on("input",function(){if($(".hb").hasClass("on")){cxt.strokeStyle = $(this).val()}})$(".range").on("input",function(event){event.preventDefault();cxt.lineWidth = $(this).val()$(".colVal").val($(this).val())})$(".colVal").on("input",function(){cxt.lineWidth = $(this).val()$(".range").val($(this).val())})$(".xp").on("click",function(){cxt.strokeStyle = "#fff"$(this).addClass("on").prev().removeClass("on")})$(".hb").on("click",function(){cxt.strokeStyle = $(".col").val();$(this).addClass("on").next().removeClass("on")})$(".clearBox").click(function(){cxt.clearRect(0,0,c.width,c.height)})$("#cv").on({mousedown:function(e){var x = e.clientX - $("#cv").offset().leftvar y = e.clientY - $("#cv").offset().topcxt.beginPath();cxt.moveTo(x,y);$(document).on({mousemove:function(e){var x = e.clientX - $("#cv").offset().leftvar y = e.clientY - $("#cv").offset().topcxt.lineTo(x,y);cxt.stroke();},mouseup:function(){$(document).off("mousemove");}})},mousemove:function(e){$(".z-b").html("坐标("+e.offsetX+","+e.offsetY+")")}})</script>
</html>

画板、H5canvas制作画板源文件免费下载相关推荐

在几何画板中如何制作圆柱的侧面展开动画_几何画板如何制作圆柱体形成的过程动画...
原标题:几何画板如何制作圆柱体形成的过程动画圆柱可以看成是矩形以它的一边所在的直线为轴,其余各边旋转一周而成的面所围成的几何体.为了让学生们在课堂上能直观看到圆柱形成的过程,这时就可以用几何画板进行 ...
几何画板v5.0.6源文件（破解成功）
首先,我要感谢seewo,官方镜像中竟然有破解好的几何画板但是,我们并不能因小失大,安装seewo定制系统我们学校安装了seewo的电子黑板,用的定制镜像虽然没有几何画板的安装包,但是却有源文件 ...
python使用matplotlib制作画板和轴
[高心星出品] 文章目录前言一.安装matplotlib库二.使用matploatlib制作画板和轴 1.引入库 2.创建画板和轴总结前言 Matplotlib 是 Python 的绘图库. ...
HTML5 canvas画板的制作
canvas画板的制作今天看了一些canvas视频的教程,有制作画板的过程,但是我有给出他们的简洁版和使用版本,能让用户看出画直线的路径,也就是当你拉一条直线的时候就和绘图工具一样,都能很好使用 ...
HTML5期末大作业：漫画网站设计——布卡漫画官网(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 w学生原创课程设计漫画设计制作大作业成品免费下载
HTML5期末大作业:漫画网站设计--布卡漫画官网(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 w学生原创课程设计漫画设计制作大作业成品免费下载常见网页设计作业题材有 ...
canvas制作画板
canvas画板的制作今天想给大家分享下canvas教程,有制作画板的源代码,html,css,javascript,图片素材在下面,快去体验下!!!喜欢伙伴记得关注哦,想要其他源代码记得在评论说下 ...
『集合』logo制作+音乐免费下载+全能计算机+高清壁纸
软件名称 : logo制作软件版本:1.0 软件语言:中文软件大小:1.29M 测试机型:OPPO R17 软件简介:免费制作logo ,里面的素材免费可商用,且logo素材经常更新下载地址:h ...
最新音乐制作编曲软件FL Studio 20.99.3中文版免费下载和2023序列号
音乐制作编曲软件FL Studio 20.99.3中文版是世界上最知名.最流行的音乐编程和制作软件应用程序.在创作高质量的旋律时,这是绝大多数有远见的艺术家的选择.FL Studio 20.993是一 ...
js 定时网页点击_学生网页作业制作网页设计成品免费下载第五期
0 1 作品编号 MF13 网页主题:文学文章类题材网页作品布局方式:表格布局作品页数:6页下载链接:见官网下载密码:nl5m 作品介绍:文学诗词类题材学生网页基础作品,采用表格布局制作,共6 ...

画板、H5canvas制作画板源文件免费下载

画板、H5canvas制作画板源文件免费下载相关推荐

最新文章

热门文章