jQuery进度条插件circleChart.js高分屏模糊问题

只需要设置两个地方:

1.限制canvas画布展示在屏幕上的css大小。(无论canvas画布多大,都会被缩放到正好塞进css的宽高40px)
2.将canvas画布设置为css大小2倍



<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <style>
    .circleChart_canvas{  //1.限制canvas画布展示在屏幕上的css大小。(无论canvas画布多大,都会被缩放到正好塞进css的样式里) width: 40px;
      height: 40px;
    }
  style>
head>
<body>
  <div class="circleChart" id="circle1">div>
  <script src="./plug/jquery-2.1.0.js">script>
  <script src="./plug/circleChart.js">script>
  <script>
    // $("#circle1").circleChart()
    $(".circleChart").circleChart({
            size: 80,   //2.将canvas画布设置为css大小2倍
            value: 50,
            text: 0,
            onDraw: function(el, circle) {
                circle.text(Math.round(circle.value) + "%"); // 根据value修改text
            }
        });
  script>
body>
html>

如果不想刨根问底,以上,插件高分屏模糊问题就已经解决了。↑

原理:

[参考博客地址](https://www.jianshu.com/p/f443685953ea)

参悟原理的过程:


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/* 限制画布的css宽高 */
canvas{//不处理模糊问题不用写,处理就写
background:#eee;
width: 200px;
height: 200px;
}
style>
head>
<body>



画布的宽高设为css宽高的2倍,届时会被等比例缩放塞进css宽高中,这样1px才是真正的1px宽度(canvas 绘图时,会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时,一个 1px 的线条实际上占据了两个物理像素(每个像素实际上只占一半),由于不存在 0.5 个像素,所以这两个像素本来不应该被绘制的部分也被绘制了,于是 1 物理像素的线条变成了 2 物理像素,视觉上就造成了模糊)
<canvas id="canvas" width="400" height="400">canvas>
<script>
// 不处理模糊问题
// const vanvas = document.getElementById('canvas')
// const ctx = canvas.getContext('2d')
// ctx.strokeStyle = '#000'
// ctx.lineWidth = 1
// ctx.strokeRect(10, 10, 100, 100)

//处理模糊问题
const vanvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.scale(2, 2)//放大为实际需要的
ctx.strokeStyle = '#000'
ctx.lineWidth = 1
ctx.strokeRect(10, 10, 100, 100)//这个宽高相对于画布的宽高,想为100px的话,就要放大2倍

script>
body>
html>

你可能感兴趣的:(plug,canvas)