Canvas绘图

爱被打了一巴掌 2022-03-15 01:44 291阅读 0赞

# Canvas绘图 #

### Canvas简介 ###

*  Canvas是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
 *  canvas标记和SVG以及VML
    
     *  canvas有一个基于js绘图的api;移除元素时需要擦掉绘图重新绘制它
     *  SVG和VML使用xml文档来绘图；移除元素时比较容易编辑

### 静态绘图 ###

*  结果展示
    
     *  ![k1D7lq6.png][]
 *  代码
    
     
    
        <!DOCTYPE html>
        <html>
        <head> 
        <meta charset="utf-8"> 
        <title>demo</title> 
        </head>
        <body>
        
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
        您的浏览器不支持 HTML5 canvas 标签！
        </canvas>
        
        <script>
        
        //获取canvas对象
        var c=document.getElementById("myCanvas");
        
        //判断浏览器是否支持Canvas
        if(c.getContext){
        
        //获取画笔【平面图形】
        var ctx=c.getContext("2d");
        
        //设置颜色
        ctx.fillStyle="#FF0000";
        
        //绘制矩形
        ctx.fillRect(25,12.5,150,75);//开始x，开始y，结束x，结束y
        
        //canvas绘制--路径
        ctx.moveTo(0,0);
        ctx.lineTo(200,100);
        ctx.stroke();
        
        //canvas绘制--文字
        ctx.fillStyle="#00ff00";
        ctx.font="20px Arial"
        ctx.fillText("Hello World",50,40);//数据，开始x，开始y
        
        //canvas绘制--图片
        var img=new Image();
        img.src="https://www.baidu.com/img/bd_logo1.png?where=super";
        img.onload=function(){
            ctx.drawImage(img,70,50,70,30);//图片对象，开始x,开始y，长，宽
        };
        
        }
        </script>
        
        </body>
        </html>

### 鼠标事件动态绘图 ###

*  结果展示
    
     *  ![YsnCVVN.png][]
 *  代码
    
     
    
        <!DOCTYPE html>
        <html>
        <head> 
        <meta charset="utf-8"> 
        <title>demo</title> 
        </head>
        <body>
        
        <canvas id="canvas" width="600" height="400" style="background-color: #0f0"></canvas>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        
        <script>
        
        var canvas = document.getElementById('canvas'); // 得到画布
        var ctx = canvas.getContext('2d'); // 得到画布的上下文对象
        var flag = false;
        var x = 0; // 鼠标开始移动的位置X
        var y = 0; // 鼠标开始移动的位置Y
        var url = 'https://www.baidu.com/img/bd_logo1.png?where=super'; // canvas图片的二进制格式转为dataURL格式
        
        /* 为canvas绑定mouse事件 */
        $('canvas').mousedown(function(e){
            flag = true;
            x = e.offsetX; // 鼠标落下时的X
            y = e.offsetY; // 鼠标落下时的Y
        }).mouseup(function(e){
            flag = false;
            url = $('canvas')[0].toDataURL(); // 每次 mouseup 都保存一次画布状态
        }).mousemove(function(e){
           drawRect(e); // 绘制方法
        
           drawLine(e);//绘制直线
        
           drawCircle(e);//绘制圆圈
        
           //loadImage(e);  //绘制图片
        
        });
        
        function drawPencil(e){
            if(flag){
                ctx.lineTo(e.offsetX,e.offsetY);
                ctx.stroke(); // 调用绘制方法 
            }else{
                ctx.beginPath();
                ctx.moveTo(x,y);
            }
        }
        
        function drawRect(e){
            if(flag){
                //ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.beginPath();
                ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
            }
        }
        
        function drawLine(e){
            if(flag){
               // ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.beginPath();
                ctx.moveTo(x,y);
                ctx.lineTo(e.offsetX,e.offsetY);
                ctx.stroke();   
            }
        }
        
        function drawCircle(e){
            if(flag){
               //ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.beginPath();
                var rx = (e.offsetX-x)/2;
                var ry = (e.offsetY-y)/2;
                var r = Math.sqrt(rx*rx+ry*ry);
                ctx.arc(rx+x,ry+y,r,0,Math.PI*2); // 第5个参数默认是false-顺时针
                ctx.stroke();
            }
        }
        
        function loadImage(e){
            if(flag){
                var img = new Image();
                img.src = url;
                ctx.drawImage(img,x,y,e.offsetX-x,e.offsetY-y);
            }
        }
        
        </script>
        
        </body>
        </html>

[k1D7lq6.png]: https://i.imgur.com/k1D7lq6.png
[YsnCVVN.png]: https://i.imgur.com/YsnCVVN.png