标签：Canvas scale image ctx 清屏 H5 canvas var height

背景：项目地图页面上有海量点，每个点都有不同的指标数值，而且很多点根据分类还用不同的图片作为背景。因此考虑用H5 Canvas加载图标png并把数值画上去，然后把canvas导出图片url并应用到点标记上。

1、常规绘制：

代码：

 var image = new Image();
    image.src='../../assets/img/pollution/pollution-province-excellent.png';
    image.onload =()=>{
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);
        ctx.fillStyle = '#fff';
        ctx.font='14px Arial';

        ctx.fillText('35', 25, 30);
        var image1 = new Image();
        image1.src = canvas.toDataURL();
        var containerNode = document.querySelector('#div1');
        containerNode.append(canvas);
    };

 数字显然很模糊。

2、根据设备像素比devicePixelRatio来绘制：

（参考MDN官网Canvas API说明：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio）

代码：

var image = new Image();
image.src='../../assets/img/pollution/pollution-province-excellent.png';
image.onload =()=>{
    var canvas = document.createElement('canvas');
    const {width, height} = image;
    canvas.style.width = width+'px';
    canvas.style.height = height+'px';
    //var scale = window.devicePixelRatio;
    var scale = 2; //我为什么用2，而不用devicePixelRatio数值？因为我的电脑Win10系统设置了自定义缩放比大于devicePixelRatio但小于2（200%）
    canvas.width 
= Math.floor(width*scale);
    canvas.height = Math.floor(height*scale);
    var ctx = canvas.getContext('2d');
    ctx.scale(scale, scale);//scale>1表示放大，反之表示缩小。即绘制原先1px现在是绘制scale个pixel
　　 //注意绘制内容在scale之后开始
    ctx.drawImage(image, 0, 0);
    ctx.fillStyle = '#ffffff';
    ctx.font='14px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    var x = canvas.width/2;
    var y = canvas.height/2;
    ctx.fillText('35', x/scale, y/scale);//为什么x/y还除以scale，因为画布实际放大了scale倍，所以x,y绘制的像素也放大了scale，所以再除以scale
    var image1 = new Image();
    image1.src = canvas.toDataURL();
    var containerNode = document.querySelector('#div2');
    containerNode.append(canvas);
};
        

2次绘制的效果对比：

标签：Canvas,scale,image,ctx,清屏,H5,canvas,var,height
来源： https://www.cnblogs.com/davidxu/p/13379408.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。