canvas 模糊
让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 模糊的更多相关文章
- 关于Canvas模糊的问题
前言:当我在几个多月前,第一次在移动设备上使用canvas绘制内容的时候,我惊然地发现我绘制的图片以及文字居然都是模糊的!我的内心几乎是崩溃的,因为那是我第一个使用canvas的项目,是一个基于微信端 ...
- canvas模糊事件处理
不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况: 具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变: 这里简单介绍个对象,window.devicePixelRa ...
- vue实现pdf导出，解决生成canvas模糊等问题
最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --sa ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- FireMonkey 绘图(1)
FireMonkey 绘图(1) FMX 的 Canvas 在不同的系统上会分别使用:WinVista.Win7: D2D (FMX.Canvas.D2D.pas)WinXP: GDI+ (FMX.C ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- 使用 canvas 画图时图像文字模糊的解决办法
最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...
- 解决 canvas 绘图在高清屏中的模糊问题
解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...
随机推荐
- ntp子母钟（gps子母钟系统）时钟系统在智能交通系统中的重要性
ntp子母钟(gps子母钟系统)时钟系统在智能交通系统中的重要性 ntp子母钟(gps子母钟系统)时钟系统在智能交通系统中的重要性 技术交流:岳峰 15901092122 http://www.bjh ...
- Delphi 移除窗口最大化按钮
很遗憾,好像没有直接的代码可以操作,可以试试以下代码: var GWL_Result: Integer; begin GWL_Result:= GetWindowLong(Handle,GWL_STY ...
- Git Commit Rule
## git commit tagfeat: 新功能fix: 修复问题docs: 修改文档style: 修改代码格式,不影响代码逻辑refactor: 重构代码,理论上不影响现有功能perf: 提升性 ...
- VMware Workstation 未能启动VMware Authentication Service
(1)今天像往常一样打开vmware启动虚拟机,但是弹出个框,显示VMware Workstations 未启动VMware Authorization Service,让我尝试手动启动. (2)Wi ...
- 视频直播系统源码，java 随机验证码 、10 分钟有效
视频直播系统源码,java 随机验证码 .10 分钟有效 1.首先创建一个vo类存放我们验证码相关信息. import lombok.AllArgsConstructor;import lombok. ...
- vue 项目中引入图片使用相对路径，图片不显示的问题
在 vue 项目中引入图片,路径为相对路径时,会显示 src="[object Module]" 采用 import 方式引入图片,再设置到 src 中 会正常显示 file-lo ...
- JAVA学习笔记-10
String类: 字符串是一个特殊的对象.字符串最大的特点:一旦被初始化就不可以被改变. String类适用于描述字符串事物.那么它就提供了多个方法对字符串进行操作. 常见的操作: 1.获取: int ...
- 关于filter_input函数
PHP: filter_input <?php $search_html = filter_input(INPUT_GET, 'search', FILTER_SANITIZE_SPECIAL_ ...
- Apollo配置中心拉取，通过单独打包解决 Get config services failed from http://阿里云局域网访问IP:8080/services/config?appId=MyAppId&ip=192.168.145.1 Cause Could not complete get operation
Apollo配置中心拉取,通过单独打包解决 Get config services failed from http://阿里云局域网访问IP:8080/services/config?appId=M ...
- 备份还原ESXi 中的虚拟机快照
了解 ESXi 中的虚拟机快照 (1015180) Click here to view full document Symptoms 免责声明:本文是 Understanding VM snapsh ...