很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉。

 <canvas ref="canvas" width="200" height="200"/>

正常情况下一般都是这么写的,但是实际上对于canvas来说,这个canvas.width canvas.height 与canvas.style.width canvas.style.height不一样。

在标签中作为props输入的高和宽指的是画布大小,而css给#canvas指定的高宽则是实际尺寸,所以我们就可以放大画布,然后让实际尺寸小于画布尺寸即可,这样相当于图片缩小,清晰度会相应的提高

<canvas ref="canvas" style={{width:200,height:200}} width="400" height="400"/>

比如这样,就相当于先绘制了一个400*400的画布,然后缩放到200*200的空间上,但是同时绘制的所有坐标需要根据缩放的比例进行相对应的计算,包括文字输入的字体大小

效果如下图所示,

根据代码一得到的结果不够清晰,而代码二的结果和HTML文字输入相差无几

ps:圆环百分比绘制代码

         let canvas = this.refs.canvas;
let context = canvas.getContext('2d');
let centerX = canvas.width/2;
let centerY = canvas.height/2;
let rad = Math.PI*2/100;
let endNum = this.props.param[1] * 100;
let scale = 2;
//context.mozImageSmoothingEnabled = true;
//context.webkitImageSmoothingEnabled = true;
//context.msImageSmoothingEnabled = true;
context.imageSmoothingEnabled = true;
//context.webkitFontSmoothing = true;
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.strokeStyle = "#53FFFF"; //设置描边样式
context.lineWidth = 4*scale; //设置线宽
context.beginPath(); //路径开始
context.arc(centerX, centerY, 75*scale , -Math.PI/2, -Math.PI/2 +endNum*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
context.stroke(); //绘制
context.closePath(); //路径结束
context.restore();
context.save();
context.beginPath();
context.strokeStyle = "white";
context.lineWidth = 2*scale;
context.arc(centerX, centerY, 75*scale , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#fff"; //设置描边样式
//绘制字体,并且指定位置
context.fillStyle = "#fff";
context.font = "normal normal lighter 24px Microsoft YaHei"; //设置字体大小和字体
context.fillText("击败了全部用户", centerX-40*scale, centerY-20*scale);
context.font = "normal normal normal 60px arial";
context.fillText(endNum.toFixed(0)+"%", centerX-23*scale, centerY+15*scale);
context.font = "normal normal lighter 28px Microsoft YaHei"; //设置字体大小和字体
context.fillText(this.props.judge+'', centerX-15*scale, centerY+40*scale);
context.stroke(); //执行绘制
context.restore();

canvas绘制清晰的方法的更多相关文章

  1. 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

    这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...

  2. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  3. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  4. Canvas绘制一个大鱼喂小鱼的游戏

    Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...

  5. 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  6. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  7. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. C#语句及案例

    今天学习了,C#语句部分的分支语句,差点转不过弯来. 语句分类: 1.顺序语句 2.选择语句(分支语句) 3.循环语句 分支语句 (一)if(){} ; 按照顺序哪个if条件适合,执行哪个. 不合适就 ...

  2. js问题总结

    .removeClass(" ") 移除一个css样式 $("#popUpBox i").removeClass("channel_icon" ...

  3. .net通过获取客户端IP地址反查出用户的计算机名

    这个功能看似很少用到,但又非常实用,看似简单,但又在其中存在很多未知因素造成让人悲痛莫名的负能量... 这是公司内部最近在使用的功能,因为是DHCP,所以有时会根据计算机名做一些统计和权限的设置. 也 ...

  4. cas单点登出

    由于项目需求要实现单点登出需要在网上找了N久终于实现单点登出. 使用cas-server-core-3.3.3.jar(CAS Server 3.3.3) 使用cas-client-core-3.1. ...

  5. UIColor的用法

    UIColor,CGColor,CIColor的区别和联系 layer.shadowColor = [UIColor redColor].CGColor; 这个是今天用到的.顺便总结一下. 1.UIC ...

  6. GridView官方教程及示例

    Grid View GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The gri ...

  7. UVA 1659 Help Little Laura 帮助小劳拉 (最小费用流,最小循环流)

    (同时也是HDU 2982,UVA的数据多) 题意:平面上有m条有向线段连接了n个点.你从某个点出发顺着有向线段行走,给走过的每条线段涂一种不同的颜色,最后回到起点.你可以多次行走,给多个回路涂色(要 ...

  8. json化表单数据

    /** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...

  9. oracle查询某个用户下的所有视图

    SYS>select view_name from dba_views where owner = 'NS_RAS3'; VIEW_NAME--------------------------- ...

  10. C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码

    平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...