让style以50%的效果展示

创建2倍的canvas

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style>

		</style>

        <script type="text/javascript">	

		  window.onload=function(){

			  let canvas = document.querySelector('#c1');

			  // 获取到屏幕倒是是几倍屏。

			  let getPixelRatio = function(context) {

			    var backingStore = context.backingStorePixelRatio ||

			      context.webkitBackingStorePixelRatio ||

			      context.mozBackingStorePixelRatio ||

			      context.msBackingStorePixelRatio ||

			      context.oBackingStorePixelRatio ||

			      context.backingStorePixelRatio || 1;

			     return (window.devicePixelRatio || 1) / backingStore;

			  };

			   // iphone6下得到是2

			  const pixelRatio = getPixelRatio(canvas);

			  // 设置canvas的真实宽高

			  canvas.width = pixelRatio * canvas.offsetWidth; // 想当于 2 * 375 = 750

			  canvas.height = pixelRatio * canvas.offsetHeight;

			  var cxt =canvas.getContext("2d")

			  cxt.moveTo(2*pixelRatio,2*pixelRatio)

			  cxt.lineTo(399*pixelRatio,249*pixelRatio)

			  cxt.stroke()

		  }

	    </script>

	</head>

	<body>

		<canvas  id="c1" style="border:1px dashed #000000;width: 400px;height: 250px;" >

		</canvas >

	</body>

</html>

canvas 模糊的更多相关文章

  1. 关于Canvas模糊的问题

    前言:当我在几个多月前,第一次在移动设备上使用canvas绘制内容的时候,我惊然地发现我绘制的图片以及文字居然都是模糊的!我的内心几乎是崩溃的,因为那是我第一个使用canvas的项目,是一个基于微信端 ...

  2. canvas模糊事件处理

    不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况: 具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变: 这里简单介绍个对象,window.devicePixelRa ...

  3. vue实现pdf导出，解决生成canvas模糊等问题

    最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --sa ...

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

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

  5. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  6. FireMonkey 绘图(1)

    FireMonkey 绘图(1) FMX 的 Canvas 在不同的系统上会分别使用:WinVista.Win7: D2D (FMX.Canvas.D2D.pas)WinXP: GDI+ (FMX.C ...

  7. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  8. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  9. 使用 canvas 画图时图像文字模糊的解决办法

    最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...

  10. 解决 canvas 绘图在高清屏中的模糊问题

    解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...

随机推荐

  1. Python_七十二变_二进制和字符编码

    第二章  七十二变 二进制和字符编码 8bit为1byte   字节 1024byte为1KB  千 1024KB为1MB  兆 1024MB为1GB  吉 1024GB为1TB  太 ASCLL字符 ...

  2. #pragma directive

    #pragma package(smart_init) #pragma package(smart_init)确保已打包的单元按照其依赖关系确定的顺序进行初始化(默认情况下包含在package(包)源 ...

  3. Python安装及配置教程

    安装教程 一.python3.6安装步骤 1.首先我们移步官网,下载最新版本的python-3.6.0.点我,我把你传送到python官网 在DownLoad下拉框中点击Windows,选择要下载的文 ...

  4. 提取可执行文件中的调试信息 objcopy --only-keep-debug app app.debug

    https://blog.csdn.net/CaspianSea/article/details/17269977 set-debug-directory show-debug-directory i ...

  5. 浅谈组件二封-vue

    目录 组件二封不是换一种写法 组件二封应当具备哪些条件 我认为的二封应当有哪些作用 二封的好处 先来一个列表页demo来看看效果(Vue2) 本文仅仅针对vue系列做探讨, 项目倾向于大量增删改查的后 ...

  6. @JsonFormat

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8" 不管是前端传后台,还是后台传前端, ...

  7. SQL执行定时任务JOB，包教包会

    什么是JOB? 数据库中可以定时执行任务的功能组件,那就是JOB. JOB的作用 它可以按我们设置好的参数定时执行查询语句或存储过程,特别适合一些每天,每周,每月,每年这种需要循环执行任务的场景,当然 ...

  8. 【阿里云ACP】-01（阿里云综述、弹性计算）

    课程能力 课程范围 ECS 磁盘 实例 磁盘 快照 镜像 网络 安全组 AS 伸缩组 伸缩配置 伸缩规则 伸缩活动 伸缩触发任务 伸缩模式 冷却时间 SLB 定义 实现原理 支持的协议 绘画保持 健康 ...

  9. 初次安装虚拟机和Linux

    --初学Linux记录点滴 使用软件 VMware-Workstation-15.0.4 CentOS-7-x86_64-Minimal-2003.iso 1.首先使用 VMware-Workstat ...

  10. （K8s学习笔记三）创建Namespace

    Namespace(命名空间)很多情况下用于实现多租户的资源隔离.Namespace通过将集群内部的资源对象"分配"到不同的Namespace中,形成逻辑上分为不同项目.小组或用户 ...