canvas-画图改进版-阿里云开发者社区

开发者社区> 杰克.陈> 正文

canvas-画图改进版

简介: 原文:canvas-画图改进版   前几天在canvas——画板中做了个很简陋的画板,只能画简单的线条,可以选择颜色和线条粗度,今天在此简陋的画板上增加了新的形状,撤销,保存,橡皮擦等功能,虽然功能还是很简单,刚接触canvas,过程中还是遇到了很多困难。
+关注继续查看
原文:canvas-画图改进版

 

前几天在canvas——画板中做了个很简陋的画板,只能画简单的线条,可以选择颜色和线条粗度,今天在此简陋的画板上增加了新的形状,撤销,保存,橡皮擦等功能,虽然功能还是很简单,刚接触canvas,过程中还是遇到了很多困难。

 

形状包括:铅笔、直线、直角矩形,圆角矩形、原型(利用圆角矩形能够画出很多其他好玩的图形)

提供橡皮擦、撤销、重做、清屏、保存功能

 

 

1、html中使用两个canvas,一个相当于蒙版用于缓存

<div id="imgContent">
        <canvas id="canvas" width="600" height="490">
            浏览器不支持~
        </canvas>
        <!--此canvas用于暂存graph,绘制过程中需要清除context,因而需要缓存,否则更换形状时会出现问题 -->
        <canvas id="canvasTemp"width="600" height="490" >&nbsp;</canvas>
    </div>

 

2、主要鼠标事件:

        $(canvasTemp).unbind();
        $(canvasTemp).bind('mousedown',down);
        $(canvasTemp).bind('mousemove',move);
        $(canvasTemp).bind('mouseup',up);
        $(canvasTemp).bind('mouseout',out);

 

3、更换图形时需清空蒙版canvas即canvasTemp的context环境,并且将上次绘制内容添加到canvas中

 

4、另外需要为各种形状添加鼠标移动时的图标,例如选择circle时鼠标未按下时需要绘制一个小圆

    else if(type === "circle"){
                clearContext();
                if(mouseState === true){ //鼠标按下时
                    ctxTemp.beginPath();
                    var radius = Math.sqrt((oldX - newX) *  (oldX - newX)  + (oldY - newY) * (oldY - newY));
                    ctxTemp.arc(oldX,oldY,radius,0,Math.PI * 2,false);                                    
                    ctxTemp.stroke();
                }else{
                    //鼠标没有按下时出现小圆
                    ctxTemp.beginPath();
                    //ctxTemp.strokeStyle ='#9F35FF';    
                    ctxTemp.arc(newX,newY,10 ,0, Math.PI * 2,false);
                    ctxTemp.stroke();
                }

 

5、需要存储绘制的过程,以便撤销和重做

    function saveImageHistory(){
        cancelTimes = 0;
        imageHistoryList.push(canvas.toDataURL());
        if(imageHistoryList.length > 0){
            document.getElementById("undoImage").src="./images/undo.png";
        }
    }

 

6、由于body背景设置为蓝色,canvas fill 的是白色,因而用橡皮擦时如果直接用clearRect会擦出蓝色背景,因而采用填充白色代替

//ctx.clearRect(newX - lineWeight * 10 ,  newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);
 //重新填充白色背景,否则擦出后是颜色背景
 ctx.fillStyle = "white";
ctx.fillRect(newX
- lineWeight * 10 , newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);

 

7.问题总结:

 1)body为蓝色背景,因而想将canvas背景设置为白色,然后尝试将canvas设置背景,这种方式是不行的,只能使用fillRect方式为canvas填充背景,此种方式为橡皮擦的擦除带来了问题,橡皮擦的擦除应该也使用fillRect方式而不能使用clearRect方式

   2)DOM中定义的id会再javasvript中以变量自动定义,因而一定注意js中与id同名的变量或者方法可能不起作用

 3)使用原生js时事件解绑中遇到问题,尝试了removeEventListener和最原始的将绑定事件置为null,但是没起作用,没找到解决方法因而使用了jQuery的unbind,希望有人指导

 

8.代码:

var canvas,
        ctx,
        canvasTemp,
        ctxTemp,
        mouseState = false, //初始化鼠标是否按下和坐标点位置, true为按下
        oldX = 0,
        oldY = 0,
        pencilX = 0,
        pencilY = 0,
        lineColor = "black",
        lineWeight = 1,
        canvasTop,
        canvasLeft,
        canvasWidth = 700,
        canvasHeight = 550,
        cancelTimes = 0, //撤销次数
        imageHistoryList = new Array(); //存储图片绘制历史信息
        
    
    onLoad(function(){
        init(); //初始化canvas
        
        //颜色和线宽绑定点击事件
        var colorDiv = document.getElementById("color");
        var lineDiv = document.getElementById("lineWeight");
        colorDiv.addEventListener("click", chosen);
        lineDiv.addEventListener("click", chosen);
        
        document.getElementById("pencil").click(); //未选择图形时默认为铅笔
        document.getElementById("blackBtn").click(); //默认黑色
        document.getElementById("line1").click(); //默认线宽2px
    });
    
    var chosen = function(event){
        var parentNode = event.target.parentNode;
        for(var i=0; i<parentNode.childNodes.length; i++){
            parentNode.childNodes[i].className = "";
        }
        event.target.className = "chosen";
    };
    
    var init = function(){
        //初始化canvas
        canvas = document.getElementById("canvas");
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        //判断是否支持canvas
        if(!canvas || !canvas.getContext){
            return false;
        }
        ctx = canvas.getContext("2d");
        
        //初始化画图区域白色背景
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, 700, 550);
        
        //初始化canvasTemp
        canvasTemp = document.getElementById("canvasTemp");
        canvasTemp.width = canvasWidth;
        canvasTemp.height = canvasHeight;
        ctxTemp = canvasTemp.getContext("2d");
        
        canvasTop = canvas.offsetTop,
        canvasLeft = canvas.offsetLeft;
        
        //初始化撤销和重做按钮状态
        document.getElementById("undoImage").src="./images/undoDis.png";
        document.getElementById("redoImage").src="./images/redoDis.png";

    };

    //绘制picture
    var drawPicture = function(type, obj){
        var down, //鼠标按下事件
            up, //鼠标弹起事件
            move, //鼠标移动事件
            out, //鼠标离开区域
            chosen, //图形选中
            clearContext; //清除canvas环境
        
        down = function(event){
            mouseState = true;
            event = event || window.event;
            
            oldX =  event.clientX - canvasLeft;
            pencilX =  event.clientX - canvasLeft;
            oldY = event.clientY - canvasTop;
            pencilY = event.clientY - canvasTop;
            
            ctxTemp.strokeStyle = lineColor;
            ctxTemp.lineWidth = lineWeight;
            ctxTemp.lineCap = "round";
            
            clearContext();
            
            ctxTemp.moveTo(oldX, oldY);
            
            if(type === "rubber"){
                //ctx.clearRect(oldX-lineWeight*10, oldY-lineWeight*10, lineWeight*20, lineWeight*20);
                //重新填充白色背景,否则擦出后是颜色背景
                ctx.fillStyle = "white";
                ctx.fillRect(oldX-lineWeight*10, oldY-lineWeight*10, lineWeight*20, lineWeight*20);
            }
        };
    
        up = function(event){
            //更改鼠标状态
            mouseState = false;
            event = event || window.event;
            
            //将canvasTemp中graph添加到canvas中
            var image = new Image();
            if(type !== "rubber"){
                image.src = canvasTemp.toDataURL();
                image.onload = function(){
                    ctx.drawImage(image, 0, 0, image.width, image.height);
                    clearContext();
                    
                    //保存历史记录,撤销时使用
                    saveImageHistory();
                    
                };
            }
            
        };
    
        chosen = function(obj){
            var shape = document.getElementById("shape");
            for(var i=0; i<shape.childNodes.length; i++){
                shape.childNodes[i].className = "";
            }
            if(type !== "rubber"){
                document.getElementById("rubber").className = "";
            }
            obj.className = "chosen";
        };
        
        //鼠标按下,拖动画图
        move = function(event){
            var newX = event.clientX - canvasLeft;
            var newY = event.clientY - canvasTop;
            if(type === "pencil"){
                if(mouseState === true){
                    ctxTemp.beginPath();
                    ctxTemp.moveTo(pencilX, pencilY);
                    ctxTemp.lineTo(newX, newY);
                    ctxTemp.stroke();
                    pencilX = newX;
                    pencilY = newY;
                }
            }else if(type === "rec"){
                clearContext();
                if(mouseState === true){
                    ctxTemp.beginPath();
                    ctxTemp.moveTo(oldX, oldY);
                    ctxTemp.lineTo(newX, oldY);
                    ctxTemp.lineTo(newX, newY);
                    ctxTemp.lineTo(oldX, newY);
                    ctxTemp.lineTo(oldX, oldY);
                    ctxTemp.stroke();
                }else{
                    //鼠标移动时出现矩形
                    ctxTemp.beginPath();    
                    ctxTemp.moveTo(newX - 10 ,  newY - 10 );                        
                    ctxTemp.lineTo(newX + 10  , newY - 10 );
                    ctxTemp.lineTo(newX + 10  , newY + 10 );
                    ctxTemp.lineTo(newX - 10  , newY + 10 );
                    ctxTemp.lineTo(newX- 10  , newY - 10 );    
                    ctxTemp.stroke();
                }
            }else if(type === "line"){
                if(mouseState === true){
                    ctxTemp.beginPath();
                    clearContext();
                    ctxTemp.moveTo(oldX, oldY);
                    ctxTemp.lineTo(newX, newY);
                    ctxTemp.stroke();
                }
            }else if(type === "circle"){
                clearContext();
                if(mouseState === true){
                    ctxTemp.beginPath();
                    var radius = Math.sqrt((oldX - newX) *  (oldX - newX)  + (oldY - newY) * (oldY - newY));
                    ctxTemp.arc(oldX,oldY,radius,0,Math.PI * 2,false);                                    
                    ctxTemp.stroke();
                }else{
                    //鼠标没有按下时出现小圆
                    ctxTemp.beginPath();
                    //ctxTemp.strokeStyle ='#9F35FF';    
                    ctxTemp.arc(newX,newY,10 ,0, Math.PI * 2,false);
                    ctxTemp.stroke();
                }
            }else if(type === "roundRec"){
                clearContext();
                if(mouseState === true){
                    ctxTemp.beginPath();
                    ctxTemp.moveTo(oldX, oldY);
                    ctxTemp.lineTo(newX, oldY);
                    ctxTemp.arcTo(newX+20,oldY, newX+20, oldY+20, 20);
                    ctxTemp.lineTo(newX+20, newY);
                    ctxTemp.arcTo(newX+20,newY+20, newX, newY+20, 20);
                    ctxTemp.lineTo(oldX, newY+20);
                    ctxTemp.arcTo(oldX-20,newY+20, oldX-20, newY, 20);
                    ctxTemp.lineTo(oldX-20, oldY+20);
                    ctxTemp.arcTo(oldX-20,oldY, oldX, oldY, 20);
                    ctxTemp.stroke();
                }else{
                    //鼠标没有按下时出现小的圆角矩形
                    ctxTemp.beginPath();
                    //ctxTemp.strokeStyle ='#9F35FF';    
                    ctxTemp.moveTo(newX - 10 ,  newY - 10);
                    ctxTemp.lineTo(newX, newY - 10);
                    ctxTemp.arcTo(newX + 10,newY - 10, newX + 10, newY, 10);
                    ctxTemp.lineTo(newX + 10, newY + 10);
                    ctxTemp.arcTo(newX + 10, newY + 20, newX, newY + 20, 10);
                    ctxTemp.lineTo(newX - 10, newY + 20);
                    ctxTemp.arcTo(newX - 20,newY + 20, newX - 20,newY + 10,10);
                    ctxTemp.lineTo(newX - 20,newY);
                    ctxTemp.arcTo(newX - 20,newY - 10, newX - 10,newY - 10, 10);
                    ctxTemp.stroke();
                }
            }else if(type === "rubber"){
                //鼠标没有按下时出现橡皮擦图标
                ctxTemp.beginPath();
                clearContext();
                ctxTemp.strokeStyle =  '#000000';                        
                ctxTemp.moveTo(newX - lineWeight * 10 ,  newY - lineWeight * 10 );                        
                ctxTemp.lineTo(newX + lineWeight * 10  , newY - lineWeight * 10 );
                ctxTemp.lineTo(newX + lineWeight * 10  , newY + lineWeight * 10 );
                ctxTemp.lineTo(newX - lineWeight * 10  , newY + lineWeight * 10 );
                ctxTemp.lineTo(newX- lineWeight * 10  , newY - lineWeight * 10 );    
                ctxTemp.stroke();    
                if(mouseState === true){
                    //ctx.clearRect(newX - lineWeight * 10 ,  newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);
                    //重新填充白色背景,否则擦出后是颜色背景
                    ctx.fillStyle = "white";
                    ctx.fillRect(newX - lineWeight * 10 ,  newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);

                    
                }
            }
            
        };
        
        out = function(){
            clearContext();
        };
        clearContext = function(){
            ctxTemp.clearRect(0,0,canvas.width,canvas.height);
        };
        
        //将选中的形状置为选中状态
        chosen(obj);
        
        //canvas添加鼠标事件, 鼠标移动、鼠标按下和鼠标弹起
        /*
        canvasTemp.addEventListener("mousemove", move);
        canvasTemp.addEventListener("mousedown", down);
        canvasTemp.addEventListener("mouseup", up);
        canvasTemp.addEventListener("mouseout", out);
        */
        
        /*
         * 本来尝试使用原生js来写,但是在上面的事件解绑中遇到问题
         * 尝试了removeEventListener和最原始的将绑定事件置为null,但是没起作用,没找到解决方法因而使用了jQuery的unbind
         * 
         */
        
        $(canvasTemp).unbind();
        $(canvasTemp).bind('mousedown',down);
        $(canvasTemp).bind('mousemove',move);
        $(canvasTemp).bind('mouseup',up);
        $(canvasTemp).bind('mouseout',out);
    };
    
    
    /*
     * 保存picture历史记录
     */
    function saveImageHistory(){
        cancelTimes = 0;
        imageHistoryList.push(canvas.toDataURL());
        if(imageHistoryList.length > 0){
            document.getElementById("undoImage").src="./images/undo.png";
        }
    }
    
    var  exportImage = function(event){
            var imgSrc = canvas.toDataURL("image/png");
            document.getElementById("image").src = imgSrc;
        };
    
    /*
     * undo 撤销一次
     */
    var undo = function(){
        cancelTimes++;
        if(cancelTimes >= imageHistoryList.length+1){
            cancelTimes--;
            return;
        }else if(cancelTimes == imageHistoryList.length){
            document.getElementById("redoImage").src="./images/redo.png";
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            document.getElementById("undoImage").src="./images/undoDis.png";
        }else{
            document.getElementById("redoImage").src="./images/redo.png";
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            var image = new Image();
            image.src = imageHistoryList[imageHistoryList.length-1-cancelTimes];
            image.onload = function(){
                ctx.drawImage(image, 0, 0, image.width, image.height);
            };
        }
    };
    
    /*
     * redo,重做上一次操作
     */
    var redo = function(){
        cancelTimes--;
        if(cancelTimes < 0){
         cancelTimes++;
            return;
        }else{
            if(cancelTimes == 0){
                document.getElementById("redoImage").src="./images/redoDis.png";
                document.getElementById("undoImage").src="./images/undo.png";
            }
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            var image = new Image();
            image.src = imageHistoryList[imageHistoryList.length-1-cancelTimes];
            image.onload = function(){
                ctx.drawImage(image, 0, 0, image.width, image.height);
            };
        }
    };
    
    /**
     *清屏 
     */
    function clearScreen(){
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctxTemp.clearRect(0, 0, canvasWidth, canvasHeight);
    }
    

    /**
    * 工具函数onLoad,当文档载入完成时调用一个函数
    */
    function onLoad(f){
        if(onLoad.loaded){
            window.setTimeout(f,0);
        }else if(window.addEventListener){
            window.addEventListener("load",f,false);
        }else if(window.attachEvent){
            window.attachEvent("onload",f);
        }
    }
    onLoad.loaded = false;
    onLoad(function(){
        onLoad.loaded = true;
    });
    

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7381 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
9672 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9092 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2126 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11174 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10692 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4456 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
20979 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载