CanvasRenderingContext2D.imageSmoothingEnabled
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.
CanvasRenderingContext2D
.imageSmoothingEnabled
是 Canvas 2D API 用来设置图片是否平滑的属性,true表示图片平滑(默认值),false表示图片不平滑。当我们获取 imageSmoothingEnabled
属性值时, 它会返回最新设置的值。
以缩放画布为例,这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。 如果那样的话,设置属性值为false。 参见 CSS image-rendering
属性。
语法
ctx.imageSmoothingEnabled = value;
选项
-
value
-
一个
Boolean
类型的值,表示图片是否平滑。
示例
使用 imageSmoothingEnabled
属性
这是一段简单的代码片段,对缩放的图片使用 imageSmoothingEnabled
属性。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; img.onload = function() {ctx.mozImageSmoothingEnabled = false;ctx.webkitImageSmoothingEnabled = false;ctx.msImageSmoothingEnabled = false;ctx.imageSmoothingEnabled = false;ctx.drawImage(img, 0, 0, 400, 200); };
var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; img.onload = function() {ctx.mozImageSmoothingEnabled = false;ctx.webkitImageSmoothingEnabled = false;ctx.msImageSmoothingEnabled = false;ctx.imageSmoothingEnabled = false;ctx.drawImage(img, 0, 0, 400, 200); };
规范描述
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.imageSmoothingEnabled |
Living Standard |
浏览器兼容性
- Desktop
- Mobile
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support |
30 webkit (until 29) |
(Yes) moz bug 768072 |
(Yes) ms |
? | ? |
参见
- 接口定义,
CanvasRenderingContext2D
image-rendering
转载于:https://www.cnblogs.com/jiangxiaobo/p/5989752.html
CanvasRenderingContext2D.imageSmoothingEnabled相关推荐
- 前端:JS/38/canvas状态的保存和恢复(canvas常用状态大全),canvas画布中图像的变形
canvas状态的保存和恢复 Saving and restoring state 在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法. canvas.save() 保存画布(canva ...
- CanvasRenderingContext2D(渲染上下文对象)
CanvasRenderingContext2D是一个对象,它有很多属性和方法,通过设置它的属性和调用它的方法,我们可以 绘制出优美的图像,获取这个对象很简单: var canvas = docu ...
- echarts 报错Failed to execute 'createRadialGradient' on 'CanvasRenderingContext2D': The provided doubl
报错:Uncaught TypeError: Failed to execute 'createRadialGradient' on 'CanvasRenderingContext2D': The p ...
- CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...
- React + Canvas 像素风格取色器
前言 有时候我们需要通过图片去获得具体像素的颜色.而强大的 Canvas 为我们提供了现成的接口. 这个功能其实并不难,只不过我们需要正确的理解 Canvas 并学会利用它的 API . 如果你急于看 ...
- canvas基础简单易懂教程(完结,多图)
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https ...
- 谷歌公司再出大招,Chrome 新版本发布
导读 您在用什么浏览器呢?Chrome 55 Beta 发布了,是不是很期待让我们一起来看看都有哪些方面的技术改进和变化呢? 主要内容如下: 1.输入处理改进 随 着移动网络使用的普及,网站对触摸输入 ...
- 基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
- fabric.Canvas
fabric.Canvas new Canvas() Canvas class 源码: fabric.js, line 11253 教程: http://fabricjs.com/fabric-int ...
最新文章
- UVa 10954 Add All 贪心
- 兼容ie9以下css3,hover和圆角(htc)
- HDU2018 母牛的故事
- 16.matlab中各种文件的I/O操作1——load/save
- 使用内核定时器的second字符设备驱动及测试代码
- 按照月的第几周统计_商标评审案件审理情况月报(2020年第11期)
- 单例模式(singleton)解析例子
- android field 类型,Gradle buildConfigField 使用Hashmap ArrayList 等类型
- http get和post的区别
- 搜索python代码的软件_python小说爬虫工具,小说搜索下载软件附源码
- 网络编程之OSI七层协议
- VIM文本编辑器相关命令实验总结
- 计算机-计算机发展史
- 【预测模型】Logistic 人口阻滞增长模型
- Python 函数的嵌套
- 国内HTML5前端开发框架汇总
- 计算机硬件系统的主要性能指标
- 二级路由器设置为何要关闭DHCP服务
- 浙大计算机系学霸,浙大学霸将脑电波控制变现实
- 一个更加强大的查壳工具, 更新版本
热门文章
- 悟空问答 模板 html,悟空问答上首页技巧每小时2500个阅读快速为自己吸粉.pdf
- c语言中next和prior连在一起,C语言中双向链表和双向循环链表详解
- Navicat 连接MySQL 8.0.11 出现2059错误
- 一个不会画流程图的程序员不是一个好码农
- Linux开机自动启动Tomcat
- Requests Header | Http Header
- IDEA修改SVN地址
- ORA-22859 无效的列修改
- java 文件追加 变大_用java写在doc中追加内容代码时,为什么它只能写入一次内容,后面都只是增加文件的大小,不增加内容啊?...
- 常见网盘和云存储测评和使用方式