用Canvas模拟苹果画图工具

最新推荐文章于 2024-04-25 20:22:26 发布
最新推荐文章于 2024-04-25 20:22:26 发布
阅读量893 收藏
点赞数 1
分类专栏： Canvas-画布 文章标签： html canvas html5-css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sx_lidan/article/details/52371936
版权

该画图工具主要有以下几个功能：
- 文件菜单中主要有保存、清除、撤销三个功能
- 画图菜单中主要有线条、圆形、矩形三个功能
- 颜色菜单
- 边框菜单中主要有3个线条
- 类型菜单中主要有实心和空心
- 编辑件菜单中主要有擦除、选择2个功能

先看下效果

这里写图片描述

这里写图片描述

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
  <link rel="stylesheet" href="css/canvas.css">
  <script src="js/jquery-1.11.2.js"></script>
  <script src="js/shapes.js"></script>
    <script>
        window.onload=function (){

          var box=document.getElementsByClassName("canvas")[0];
          var canvas=document.getElementsByTagName("canvas")[0];
          canvas.width=box.offsetWidth;
          canvas.height=box.offsetHeight;

          var cobj=canvas.getContext("2d");

          /*
           cobj.putImageData(data,100,100)
         */
          var files=document.getElementsByClassName("file");
          for (var i = 0; i < files.length; i++) {
            files[i].onmouseover=function (){
                var son=this.getElementsByClassName("son")[0];
                  son.style.display="block";
            }
            files[i].onmouseout=function (){
                var son=this.getElementsByClassName("son")[0];
                  son.style.display="none";
            }
          };


          var lis=document.getElementsByClassName("menu")[0].getElementsByTagName("li");
          var color=document.getElementsByTagName("input")[0];



          var attrObj={};

          //图形菜单
          var shape=document.getElementsByClassName("shape")[0];
          var shapeMenu=shape.getElementsByTagName("li");
          for (var i = 0; i < shapeMenu.length; i++) {
            shapeMenu[i].onclick=function (){
                this.parentNode.style.display="none";
                drag(canvas,cobj,this.getAttribute("data-role"),attrObj)
            }
           }; 

           //文件菜单
           var fileObj=document.getElementsByClassName("files")[0];
           var fileMenu=fileObj.getElementsByTagName("li");
           for (var i = 0; i < fileMenu.length; i++) {
            fileMenu[i].onclick=function (){
                this.parentNode.style.display="none";
                var attrVal=this.getAttribute("data-role");
                if(attrVal=="save"){
                      var url=canvas.toDataURL("image/png");

                      var str=url.replace("image/png","image/octet-stream");
                      location.href=str;
                }else if(attrVal=="clear"){
                    cobj.clearRect(0,0,canvas.width,canvas.height);
                    arr=[];
                }else if(attrVal=="back"){
                    if(arr.length==0){
                        alert("顶层");
                        return;
                    }
                    cobj.clearRect(0,0,canvas.width,canvas.height);
                    arr.pop();
                     for (var i = 0; i < arr.length; i++) {
                            arr[i][arr[i].style]()
                        };
                }
            }
           };



           //color菜单
           var colorObj=document.getElementsByClassName("color")[0];
           var colorMenu=colorObj.getElementsByTagName("input")[0];
           attrObj.strokeColor=colorMenu.value;
           attrObj.fillColor=colorMenu.value;
           colorMenu.onchange=function (){
           colorObj.style.display="none";
            attrObj.strokeColor=this.value;
            attrObj.fillColor=this.value;
           }

           //边框菜单
           var borderObj=document.getElementsByClassName("border")[0];
           var borderMenu=borderObj.getElementsByTagName("li");
               for (var i = 0; i < borderMenu.length; i++) {
                borderMenu[i].onclick=function (){
                    this.parentNode.style.display="none";
                    if(this.getAttribute("data-role")=="one"){
                      attrObj.strokeW=1;    
                    }
                    if(this.getAttribute("data-role")=="two"){
                      attrObj.strokeW=3;    
                    }
                    if(this.getAttribute("data-role")=="three"){
                      attrObj.strokeW=5;
                    }
                }
               };

               //绘制类型
           var lxObj=document.getElementsByClassName("leixing")[0];
           var lxMenu=lxObj.getElementsByTagName("li");
           for (var i = 0; i < lxMenu.length; i++) {
            lxMenu[i].onclick=function (){
                this.parentNode.style.display="none";
                var attrName=this.getAttribute("data-role")
                if(attrName=="stroke"){
                    attrObj.type="stroke";

                }else if(attrName=="fill"){
                    attrObj.type="fill";
                }

            }
           };

          //编辑菜单
          var editObj=document.getElementsByClassName("edit")[0];
           var editMenu=editObj.getElementsByTagName("li");

           for (var i = 0; i < editMenu.length; i++) {
            editMenu[i].onclick=function (){

                this.parentNode.style.display="none";
                var attrVal=this.getAttribute("data-role");
                if(attrVal=="die"){
                 die(canvas,cobj)
                }else if(attrVal=="select"){

                }
            }
           };

    //----隐藏按钮功能
    var hongyuan=document.getElementsByClassName("hongyuan")[0];
    var menus=document.getElementsByClassName("menu")[0];
    hongyuan.onclick=function(){

      box.style.cssText="width:75px;height:30px;left:45%;top:90%;";
      menus.style.overflow="hidden";

    }

    //----显示放大按钮功能
    var huangyuan=document.getElementsByClassName("huangyuan")[0];
    var clintw=parseInt(document.documentElement.clientWidth);
    huangyuan.onclick=function(){
      var boxw=parseInt(box.offsetWidth);
      //alert(clintw);
      //alert(boxw);
      if(boxw<(clintw*0.5)){
        menus.style.overflow="visible";
        box.style.cssText="width:70%;height:80%;left:15%;top:5%";

      } else if((boxw>(clintw*0.4))&&(boxw<(clintw*0.6))){
        box.style.cssText="width:70%;height:80%;left:15%;top:5%";

      }else if(boxw>(clintw*0.6)){
        box.style.cssText="width:50%;height:60%;left:25%;top:5%";

      };



    }


    //----关闭按钮功能
    var lvyuan=document.getElementsByClassName("lvyuan")[0];
    lvyuan.onclick=function(){

      box.style.cssText="width:0;height:0;display:none;"


    }



    }         
    </script>
</head>
<body>

<div class="canvas">
    <div class="menu">
    <div class="yuandian">
      <div class="hongyuan">~</div>
      <div class="huangyuan">口</div>
      <div class="lvyuan">X</div>
    </div>
          <!--文件-->
          <div class="file files">
            文件
            <ul class="son ">
                 <li data-role="save">保存</li>
                 <li data-role="clear">清除</li>
                 <li data-role="back">撤销</li>
            </ul>
          </div>
          <!--画图-->
          <div class="file">
            画图
            <ul class="son shape">
                 <li data-role="line">线条</li>
                 <li data-role="circle">圆形</li>
                 <li data-role="rect">矩形</li>
            </ul>
          </div>
          <!--颜色-->
          <div class="file">
            颜色
            <ul data-role="color" class="son color">
            <li><input type="color" name="color" value="#ffffff"></li>
            </ul>
          </div>
          <!--边框宽度-->
          <div class="file">
             边框
             <ul class="son border">
                 <li data-role="one" ></li>
                 <li data-role="two" ></li>
                 <li data-role="three" ></li>
             </ul>
          </div>

           <!--类型-->
          <div class="file">
             类型
             <ul class="son leixing">
                 <li data-role="stroke"></li>
                 <li data-role="fill"></li>

             </ul>
          </div>
          <!--编辑-->
           <div class="file">
             编辑
             <ul class="son edit">
                 <li data-role="die">擦除</li>
                 <li data-role="select">选择</li>

             </ul>
          </div>
    </div>
    <canvas width=500 height=500>
    </canvas>
</div>  
</body>
</html>

样式css

 body{
        padding:0;margin:0;
      background:url("../img/bg1.jpg") no-repeat 0 0;
      }
      ul,li{
        list-style:none;padding:0;margin:0;
      }
      .canvas{
        width:70%;height:80%;border:1px solid #aaa;
        margin:2% auto;border-radius: 10px;overflow:hidden;
      box-shadow: 0 0 20px #000;background:#313131;
      position:fixed;left:15%;top:5%;
      transition:all 0.5s ease;
      }
    .yuandian{float:left;width:100px;height:100%;
              font-family: "微软雅黑";font-size: 10px;
    }
    .hongyuan{
      width: 15px;height:15px;border-radius: 50%;background: #F5544D;
      float:left;margin:7px 5px;text-align:center;line-height:15px;
      cursor: pointer;
    }
    .huangyuan{
      width: 15px;height:15px;border-radius: 50%;background: #F0D765;
      float:left;margin:7px 5px;text-align:center;line-height:15px;
      cursor: pointer;
    }
    .lvyuan{
      width: 15px;height:15px;border-radius: 50%;background: #97CD75;
      float:left;margin:7px 5px;text-align:center;line-height:15px;
      cursor: pointer;
    }
      .menu{
        width:100%;height:30px;border-bottom: 1px solid #575757;text-align: center;
      background:#282828;font-size: 16px;color:#fff;font-weight: 100;
      overflow:visible;
      }
      .menu .file{
        float:left;width:10%;height:100%;margin:0 10px;line-height:30px;
      cursor:pointer;position: relative;z-index:3;
      }
      .file .son{
        width:100%;height:auto;display:none;padding:10px 0;
        background:#282828;box-shadow: 0 0 20px #000;

      }
    .file .son li:hover{
      background:#1e4157;opacity: 0.8;
    }
      .border li{
        width:80%;height:10px;margin:10px auto;
      }

      .border li[data-role="one"]{
        height:2px;background:#fff;border-radius:5px;
      }
      .border li[data-role="two"]{
        height:3px;background:#fff;border-radius:5px;
      }
      .border li[data-role="three"]{
        height:5px;background:#fff;border-radius:5px;
      }
      canvas{
        background:#313131;display:block;position:relative;
      }
      .leixing li[data-role="stroke"]{
         width:30px;height:30px;margin:10px auto;
          border:1px solid #fff;
         border-radius: 5px;
      }
       .leixing li[data-role="fill"]{
         width:32px;height:32px;
         margin:10px auto;background:#fff;border-radius: 5px;
      }

shapes.js

function shapes(cobj,type,typeObj){
  this.cobj=cobj;
  this.type=type||"stroke";

  if(typeof typeObj=="object"){
    this.strokeColor=typeObj.strokeColor||"#fff";
    this.fillColor=typeObj.fillColor||"#fff";
    this.strokeW=typeObj.strokeW||1;
  }
}

shapes.prototype={
  rect:function (x,y,x1,y1){
   this.x=x||this.x;
   this.y=y||this.y;
   this.x1=x1||this.x1;
   this.y1=y1||this.y1;
   this.cobj.strokeStyle=this.strokeColor;
   this.cobj.fillStyle=this.fillColor;
   this.cobj.lineWidth=this.strokeW;
   this.cobj[this.type+"Rect"](this.x,this.y,this.x1-this.x,this.y1-this.y);
   this.style="rect";
  },
  line:function (x,y,x1,y1){
    this.x=x||this.x;
   this.y=y||this.y;
   this.x1=x1||this.x1;
   this.y1=y1||this.y1;
   this.cobj.strokeStyle=this.strokeColor;
   this.cobj.fillStyle=this.fillColor;
   this.cobj.lineWidth=this.strokeW;
   this.cobj.beginPath();   
   this.cobj.moveTo(this.x,this.y);
   this.cobj.lineTo(this.x1,this.y1);
   this.cobj.stroke();
    this.style="line";
  },
  circle:function (x,y,x1,y1){
   this.x=x||this.x;
   this.y=y||this.y;
   this.x1=x1||this.x1;
   this.y1=y1||this.y1;
   var ox=this.x;
   var oy=this.y;
   var r=Math.sqrt((this.x1-this.x)*(this.x1-this.x)+(this.y1-this.y)*(this.y1-this.y))
   var startA=0;
   var endA=2*Math.PI;
   this.cobj.strokeStyle=this.strokeColor;
   this.cobj.fillStyle=this.fillColor;
   this.cobj.lineWidth=this.strokeW;
   this.cobj.beginPath();   
    this.cobj.arc(ox,oy,r,startA,endA); 
    this.cobj[this.type]();
    this.style="circle";
  }

}

var arr=[];
function drag(canvas,cobj,type,attrobj){
  canvas.onmousedown=function (e){
    var ox,oy,mx,my;
    ox=e.layerX;
    oy=e.layerY;
    var shapetype=attrobj.type
    var obj=new shapes(cobj,shapetype,attrobj);
    canvas.onmousemove=function (e){
        cobj.clearRect(0,0,canvas.width,canvas.height);
        mx=e.layerX;
        my=e.layerY;
        obj[type](ox,oy,mx,my);
        for (var i = 0; i < arr.length; i++) {
            arr[i][arr[i].style]()
        };

    }
    document.onmouseup=function (){
        document.onmouseup=null;
        canvas.onmousemove=null;

        arr.push(obj);

    }
  }
}

function die(canvas,cobj,xiangpi){
   canvas.onmousedown=function (e){
    var ox,oy,mx,my;
    ox=e.layerX;
    oy=e.layerY;
    canvas.onmousemove=function (e){
        mx=e.layerX;
        my=e.layerY;
        var data=cobj.getImageData(mx-5,my-5,10,10)


for (var i = 0; i < data.width*data.height*4; i++) {
            data.data[i]=0;
        };
        cobj.putImageData(data,mx-5,my-5)
    }
    document.onmouseup=function (){
        document.onmouseup=null;
        canvas.onmousemove=null;


    }
  }
}
sx_lidan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas初探 —— 实现手机壳效果（适用于移动端）
mirror29的博客
09-20 4470
前言 很久没写博客，辞职了一段时间换了一份工作，没有了大屏幕写起来不方便就不想写了哈哈，这段时间学习完了ES6，Node的一些基础，近期在学习vue，但感觉不是很扎实，准备第二次学习的时候再做记录。 这次遇到一个案例感觉比较有趣，给手机壳绘上图片传给后台做成手机壳，技术上使用了canvas来实现该效果，初次使用canvas，遇到了很多问题，包括传说中的异步问题以及如何将两个ca...
canvas仿绘图软件
06-11
canvas仿绘图软件
在windows系统上逼真模拟苹果Mac Dock
09-16
在windows系统上逼真模拟苹果Mac Dock~~~~~~~~~~~~~~~~~~~~~~~~~~~
html5 canvas实现的绘图工具自由绘制图形画板源码
01-19
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
基于html5 canvas模拟时钟程序【100012429】
05-24
1、构造方法第一个参数支持传入canvas dom对象的id，既可以传canvas dom对象也可以传此dom对象的id。 2、增加setOptions方法，方便动态更新模拟时钟的属性。 3、修复传入options没有验证属性值的BUG，若传入的options的某些属性是undefined，那么就过滤掉该属性。 4、options新增handType指针类型，有line(线条)或triangle(三角形)两个可选值，默认triangle
html5 canvas 模拟Windows 画图程序.rar
07-10
html5 canvas 模拟Windows 画图程序，初看上去，你会不会觉得这就是windows 的画图程序呢？界面和功能布局几乎是一样的，而且用起来也和Windows画图没啥区别，真心模拟的很像。运用Canvas技术来实现的画图程序。
原生canvas制作画图小工具的踩坑和爬坑
11-20
最近在写一个类似截图里的简易画图的小工具，画线，画矩形，画圆，可以选择颜色，就像这样  写的过程中遇到了一些坑，还好爬出来了，也得到几位大佬的指点，稍微接触了一下zrender，在这里记录一下。 坑1，绘制过程的预览 用canvas画线没什么问题，moveTo和lineTo就好了，来一段代码凑字数（:joy:） 鼠标按下，开始绘制，记录初始鼠标的位置 startPaint = (e)=>{ this.startPaintFlag = true; this.paintstartX = e.clientX; this.paintstartY = e.clientY; }
【Python】绘图和可视化
热门推荐
sikh_0529的博客
09-23 1万+
制作信息可视化（有时称为绘图）是数据分析中最重要的任务之一。它可能是探索过程的一部分——例如，帮助识别异常值或所需的数据转换，或者作为产生模型想法的一种方式。对于其他人来说，为网络构建交互式可视化可能是最终目标。Python 有许多用于制作静态或动态可视化的附加库，但我将主要关注和基于它构建的库。matplotlib 是一个桌面设计用于创建（主要是二维）出版质量图的绘图包。该项目由John Hunter 于 2002 年在 Python 中启用了类似 MATLAB 的绘图界面。
canvas生成图片苹果问题
weixin_42340302的博客
05-28 525
<div class="mpback" ref="card1"> </div> 在这个区域内的代码生成图片 let cardref = eval('this.$refs.card1') this.$nextTick(() => { makeImg(cardref).then(res => { this.shareimg = res this.showCard.
小程序canvas绘制环形进度条
第4个苹果
04-17 5622
       最近微信小程序是真的很火！依稀还记得自己第一次写android的环形对比图（点击打开链接），一晃两年已经过去了。时间过得真快。第一次写博客的时候还是上大三的时候。现在已经工作将近三年了。最近半年由于工作的原因很少写博客，那么现在同样从环形图开始撸小程序，废话少说，直接上图……1.首先创建目录如下所示：2.编写canvas.json的内容{ "backgroundTextStyle...
html实现画苹果,基于CSS3画一个iPhone
weixin_42139429的博客
06-30 942
实现效果：实现代码htmlcss3html, body {height: 100%;}body {text-align: center;padding: 50px;background: #ccc;}.iphone {display: inline-block;vertical-align: middle;*vertical-align: auto;*zoom: 1;*display: inlin...
Canvas模拟磁场吸引动画特效特效代码
03-20
Canvas模拟磁场吸引动画特效是一款基于html5 canvas制作的科幻虚拟磁场动力吸引背景动画特效。
小程序使用canvas自适应屏幕画海报并保存图片
weixin_46237561的博客
11-06 651
小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，在绘制内容时所应用的单位仍然是 px，那么如何实现不同尺寸屏幕的自适应呢？ 我们的在开发中常用的参考屏幕尺寸（iPhone6）为：375*667； 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可： 获取系统屏幕尺寸 先利用wx.getSystemInfo （获取系统信息）的API获取屏幕宽度，然后除iPhone6的屏幕宽度，即可得到相对单位 // 在onLoad中调用 const that
IOS15.0 canvas或html2canvas绘图失败原因
qq_34927733的博客
10-13 1192
在IOS新版本15.0及以上，使用canvas或html2canvas生成海报时，字体使用-apple-system，会导致海报生成失败（并且会导致页面一直重新加载），页面也没有报错，排查该问题比较麻烦（只能通过代码一块一块放开来定位bug的根因）。 解决方案：就是将字体-apple-system去除即可。 ...
canvas 画图的方式
weixin_43910988的博客
07-13 190
canvas 两种画图方式
解决苹果手机wx.canvasToTempFilePath：fail on image问题，canvas的那些坑，图片失真问题
kzhzhang的专栏
04-18 4645
解决苹果手机wx.canvasToTempFilePath：fail on image问题，canvas的那些坑，图片失真问题
移动端（iphone）上使用canvas绘图，为canvas添加了监听点击事件，结果在iphone上点击会出现闪屏
qq_34580930的博客
07-07 1921
为html，body添加css样式即可解决html，body{-webkit-tap-highlight-color: rgba(0,0,0,0);}
Web前端开发之HTML_3
zx1026409886的博客
04-23 880
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML
最新发布
2401_83693610的博客
04-25 583
分为前端（html、css、js）和后端（php、mysql、Java），前端是看到的内容，由前端人员开发。但网页的固定结构叫做整体、头部、标题、主体... 2.网页中的结构是通过特定的HTML标签进行描述。浏览器：是网页显示、运行的平台，是前端开发必备利器。常见的浏览器包括：IE、火狐浏览器（Firefox）、谷歌（chrome）、Safari浏览器、Opera（欧朋）。三、1.html的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
canvas 模拟点击指定位置
10-13
可以使用以下代码模拟点击指定位置： ```javascript var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = 100; // 点击位置的 x 坐标 var y = 100; // 点击位置的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值