canvas绘制方块&图表&动态图表&画板

旧城等待， 2023-07-11 12:41 2阅读 0赞

### 绘制一个简单的方块儿 ###

*  这个方块可以自行移动。
 *  注意：绘制颜色一定要在绘制矩形之前。

var canvas=document.querySelector("canvas");
    canvas.width=400;
    canvas.height=200;
    var ctx=canvas.getContext("2d");//2d绘图
    
    var x=-50,y=-50;
    setInterval(animation,16);
    function animation(){ 
        ctx.clearRect(0,0,400,200);//每次清空，以便重新绘制
        ctx.fillStyle="rgba(0,0,0,0.3)";//画布颜色
        ctx.fillRect(0,0,400,200);//重新绘制画布（其实就是一个矩形块，我喜欢这么命名）
        ctx.fillStyle="tomato";
        ctx.fillRect(x,y,50,50);//画一个矩形小块
        x++;//每次interval都会加1
        if(y++ === 200){ //y也会增加，x，y合力，使方块斜着行走，然后在画布里消失时，把位移再恢复到其实位移
            x=-50;
            y=-50;
        }
    }

能够看到，用canvas绘制出画布和西红柿色方块儿，因为每次定时器调用函数都会清空画布然后再重新绘制，所以可以通过改变位移，有这种连续的动态效果。  
![在这里插入图片描述][2020030518305419.gif]

### 绘制一个简单的图表 ###

*  原始数据，建立画布，计算每条数据对应的位移、宽高，生成柱形图。

// canvas绘制简单图表
    // 先定义一个数组，作为原始数据
    var arr=[
        { id:1,price:30},
        { id:2,price:20},
        { id:3,price:60},
        { id:4,price:10},
        { id:5,price:50}
    ]
    var gap=10;//每条数据对应的柱状条之间的间距
    
    var canvas=document.querySelector("canvas");
    canvas.width=400;//预先规定好canvas有效范围
    canvas.height=300;
    var ctx=canvas.getContext("2d");//使用canvas的2d来绘制
    
    init();
    function init(){ 
        // 建好画布
        ctx.clearRect(0,0,400,300);
        ctx.fillStyle="rgba(0,0,0,0.2)";
        ctx.fillRect(0,0,400,300);
        columnShape();
    }
    
    // 形成柱状条
    function columnShape(){ 
        var max=arr.reduce((value,item)=>{ 
            // reduce();//数组的归并方法，给value赋值arr[0]，就能快速比较并找到最大值
            if(value>item)return value;
            return item.price
        },arr[0].price);
        var scaleHeight=300/5*4/max;//比例，计算其他数据显示高度的中间值
        var width=(400-(gap*(arr.length+1)))/arr.length;//加1是因为两边都有间隙的话，就会多出一个间隙
        var x=0;//坐标
        for(var i=0;i<arr.length;i++){ 
            x+=gap;
            ctx.fillStyle=getColor();//把随机颜色生成的部分封装在函数里
            var h=scaleHeight*arr[i].price;//h是各数据在画布里对应的柱形条实际高度，因为要考虑到把画布差不多填满，所以才计算了比例来使页面看起来更饱满一些
            ctx.fillRect(x,300-h,width,h);
            x+=width;
        }
    }
    
    // 随机生成颜色
    function getColor(){ 
        var color="rgb(";
        for(var i=0;i<3;i++){ 
            color+=Math.floor(Math.random()*256)+",";//生成小数的话，向下取整
        }
        return color.slice(0,-1)+")";
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

### 绘制一个会动的图表 ###

*  根据数据的不断变化，柱形图的高度不断变化。
 *  用随机数模拟数据变化，有个弊端，随机数的产生慢慢趋于平稳。

// 绘制动态图表，其实就是数据来回的改变
    // 因为是模拟数据变化，刚开始让所有price为同样
    var arr = [
        {  id: 1001, price: 0 },
        {  id: 1002, price: 0 },
        {  id: 1003, price: 0 },
        {  id: 1004, price: 0 },
        {  id: 1005, price: 0 },
        {  id: 1005, price: 0 },
        {  id: 1005, price: 0 },
        {  id: 1005, price: 0 },
    ];
    var gap = 20;
    var max;
    var canvas = document.querySelector("canvas");
    var ctx;
    init();
    function init() { 
        canvas.width = 400;
        canvas.height = 300;
        ctx = canvas.getContext("2d");
        setInterval(animation, 100);//定时调用回调函数animation
    }
    
    function animation() { 
        arr.forEach(item => { 
            var random = Math.floor(Math.random() * 10);//随机数产生，最后都趋于稳定，通过柱形图的变化能看出来
            item.price += random;
            if (item.color) return;//避免颜色改变，也就是只在新建立时候更改颜色
            item.color = getColor();
        })
        max = arr.reduce((value, item) => { 
            if (value > item.price) return value;
            return item.price;
        }, arr[0].price);
        var scaleHeight = 300 / 5 * 4 / max;
        var width = (400 - (gap * (arr.length + 1))) / arr.length;
        createChart(width, scaleHeight);
    }
    
    
    function createChart(w, hs) { 
        ctx.clearRect(0, 0, 400, 300);
        ctx.fillStyle = "rgba(0,0,0,0.2)";
        ctx.fillRect(0, 0, 400, 300);
        var x = 0;
        for (var i = 0; i < arr.length; i++) { 
            x += gap;
            ctx.fillStyle = arr[i].color;
            var h = hs * arr[i].price;
            ctx.fillRect(x, 300 - h, w, h);
            x += w;
        }
    }
    
    function getColor() { 
        var color = "rgb(";
        for (var i = 0; i < 3; i++) { 
            color += Math.floor(Math.random() * 256) + ",";
        }
        color = color.slice(0, -1) + ")";
        return color;
    }

![在这里插入图片描述][20200305204436498.gif]

### 可随意画画的画板 ###

*  遇到的几个问题：  
    （1）ctx.clearRect(0,0,1024,600); 能够将画板清空，但是不能够清除掉ctx.stroke(); 已绘制的线条；  
    （2）不过，由于canvas每当高度或宽度被重设时，画布内容就会被清空，所以用canvas.height = canvas.height; 这条语句清空，然后再重置一下笔触内容。  
    （然后这里我贴一条链接，关于[html5 canvas清空画布方法][html5 canvas]）

// 把页面当成画板，然后添加一个button，点击时，重置画板
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "tomato";//笔触颜色
    ctx.lineWidth = 10;//笔触粗细
    ctx.lineCap = "round";//笔触是圆的
    
    // 按钮
    var btn = document.querySelector("button");
    btn.addEventListener("click", function (e) { 
        //清空画板
        canvas.height = canvas.height;
        // 重置笔触样式
        ctx.strokeStyle = "tomato";//笔触颜色
        ctx.lineWidth = 10;//笔触粗细
        ctx.lineCap = "round";//笔触是圆的
    })
    
    document.addEventListener("mousedown", mouseHandler);
    function mouseHandler(e) { 
        switch (e.type) { 
            case "mousedown":
                ctx.moveTo(e.clientX, e.clientY);
                document.addEventListener("mousemove", mouseHandler);
                document.addEventListener("mouseup", mouseHandler);
                break;
            case "mousemove":
                ctx.lineTo(e.clientX, e.clientY);
                ctx.stroke();//绘制笔触 
                break;
            case "mouseup":
                document.removeEventListener("mousemove", mouseHandler);
                document.removeEventListener("mouseup", mouseHandler);
                break;
        }
    }

![在这里插入图片描述][20200305213041184.gif]

[2020030518305419.gif]: https://img-blog.csdnimg.cn/2020030518305419.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305202312134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200305204436498.gif]: https://img-blog.csdnimg.cn/20200305204436498.gif
[html5 canvas]: https://blog.csdn.net/idomyway/article/details/78513075
[20200305213041184.gif]: https://img-blog.csdnimg.cn/20200305213041184.gif