使用canvas画图，图形模糊怎么办
在说解决办法之前，例行惯例，简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本。按照Canvas中提供的方法，我们绘制出各种我们想要的图形，本来说这样就已经很棒了，但是有一个致命因素让人很心塞。对美观比较讲究的同学几乎不能忍这个因素，就是绘制的图无比的模糊！！！所以本人在研究过各种办法，也用过国外大神的库hidpi-canvas-polyfill，但也遇到了一些很难避免的问题。于是经过几次尝试之后，最终采用了一种简单粗暴的办法：将canvas绘制过程放大2倍，然后将整个canvas元素或者其父元素缩小两倍。我们先看一个没有做过处理的栗子，我们可以看到该栗子画出来的圆，那叫一个模糊，巨丑啊。&!DOCTYPE html&&html&&body&&canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;"&Your browser does not support the HTML5 canvas tag.&/canvas&&script&var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.fillStyle="yellow";ctx.arc(200,150,100,0,2*Math.PI);ctx.stroke();ctx.fill();&/script& &/body&&/html&下面我们再来看看，做放大处理然后再缩小的效果。&!DOCTYPE html&&html&&head&
.container{
&/style&&/head&&body&&div class="container"&
&canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"&
Your browser does not support the HTML5 canvas tag.
&/canvas&&/div&&script&var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.scale(2,2);ctx.beginPath();ctx.fillStyle="yellow";ctx.arc(200,150,100,0,2*Math.PI);ctx.stroke();ctx.fill();&/script& &/body&&/html&我们再看效果，画出来的图是不是细腻了许多。 这里我们有几点需要注意：canvas元素的宽和高为之前的两倍使用ctx.scale(2,2)将绘图放大两倍在父元素中添加的class中有放大缩小元素的zoom属性，0.5为缩小一倍。当然你也可以用css3中的transform:scale(0.5,0.5)的办法去缩小，只是使用这种方法不会改变布局大小，即canvas虽然视觉上变小了，但它仍旧会占两倍的高和宽。
最新教程周点击榜
微信扫一扫canvas画图和清除图片
在canvas上画一张图其实很简单，就是用drawImgage函数。
这里先贴上w3c里的定义和用法：
JavaScript 语法 1 (在画布上定位图像：)
context.drawImage(img,x,y);
JavaScript 语法 2 (在画布上定位图像，并规定图像的宽度和高度：)
context.drawImage(img,x,y,width,height);
JavaScript 语法 3 (剪切图像，并在画布上定位被剪切的部分：)
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
规定要使用的图像、画布或视频。
可选。开始剪切的 x 坐标位置。
可选。开始剪切的 y 坐标位置。
可选。被剪切图像的宽度。
可选。被剪切图像的高度。
在画布上放置图像的 x 坐标位置。
在画布上放置图像的 y 坐标位置。
可选。要使用的图像的宽度。（伸展或缩小图像）
可选。要使用的图像的高度。（伸展或缩小图像）
以上内容参考自: w3c
也可以去这个w3c上去测试使用方法。
先贴html的代码内容：
&img src="../img/test.jpg" alt="test pic" id="test_img"&
&canvas id="canvasOne"&&/canvas&
请给canvas设置一下高和宽，然后js代码如下：
$(document).ready(function() { //这里是jquery的ready方法，使用的话请导入jquery，不想用请用document.load()
var theCanvas = document.getElementById("canvasOne");
if (!theCanvas || !theCanvas.getContext) {
alert("false");
// alert($(document).width());
// alert($.browser.version)
ctx = theCanvas.getContext("2d");
var test_img = document.getElementById("test_img");
ctx.drawImage(test_img, 20, 20, 300, 300);
清除drawImage内容
现在我找到的就两个办法，一个是fillRect()把内容直接覆盖掉，一个是clearRect()清除掉内容。
这个的使用方法很简单：
context.fillRect(x,y,width,height);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
这个的使用方法和fillRect极其相似：
context.clearRect(x,y,width,height);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
就这些~ 其实我是想实现图片拖动，放大缩小然后剪切的。虽然我已经实现了~ 放到下一篇博客里。
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
今天研究的是利用HTML5的Canvas画图来模拟太阳系运转,首先,在这个太阳系里分为画轨道和画星球两个部分, 对于每一个星球我们要知道它的颜色和公转周期,如下图.
采用面向对象编程的思想,代码如下
stars.html &!DOCTYPE HTML& &html& &head&&/head& &l ...
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语. ...
我想在手机游览器上开发一个简单的拼图游戏.因此使用了canvas 由于手机尺寸问题,我先要将图片适当的缩放. width = screen.width-(2*CANVASMARGIN); height = 336*(width/500); var _img = new Image(width,height); _img.src = &pic.jpg ...
开发工具:IntelliJ IDEA 实现效果:如下 1 &!DOCTYPE html& 2 &html& 3 &head lang=&en&& 4 &meta charset=&UTF-8&& 5 &title&&/title& 6 &sc ...
如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ctx.drawImage(img,0,0);} 只有img 加载完了,你画它才有意义.
canvas元素的实际尺寸(宽度,高度)是由标签上的属性width和height来决定的. 这两个属性不设置时默认值为:宽度=300px,高度=150px. 如果在样式表里设置width和height,则表示在实际宽度和高度的基础上进行缩放,缩放后的尺寸为样式里设置的width和height. 示例代码: &!DOCTYPE html& & ...
在网上看到了一个gif图片(图片比较大,加载可能会有些慢),觉得挺有意思的:于是做为娱乐,顺便试一下Html5的canvas, 仿照上面这个图片,用js写了一个html5版本的(请用支持html5的浏览器查看,如Chrome . Firefox .Safari, IE9以下的版本不支持canvas,所以看不了)
这个程序本身没什么难度,用了几个数学公 ...
html5在canvas中插入图片 在canvas中显示图片非常简单.可以通过修正层为图片添加印章.拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点.用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容. 不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作.浏览器通常会在页面脚本 ...html2canvas截图的清晰度问题 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了10857字，被15人关注，获得了28个喜欢
html2canvas截图的清晰度问题
这个东西的作用是，可以在页面里截图，无论是整张页面，乃至单个的div，都可以依照原本的画风生成canvas，然后我们使用toDataURL这个方法就可以生成这个页面或者div的图片了。
作者上次更新就在今年，但并没有关注到一个问题：使用这样的方法生成的canvas，画质是否清晰？我们知道设备的,
文中解决这个问题的核心方法是放大canvas然后缩小显示到原比例。于是我在html2canvas.js中做了如下改动：
var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
node.setAttribute(html2canvasNodeAttribute + index, index);
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth*2, node.ownerDocument.defaultView.innerHeight*2, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
我只是将待画元素的宽度与高度都乘以2。然后这个设定对所有子元素都递归有效了。于是我们得到了一个所有待画元素都放大一倍的canvas。接下来肯定是要把canvas也放大才行。
var width = $('#earsContainer').width() ; //这是我们准备画的div
var height =
$('#earsContainer').height() ;
html2canvas($('.earsContainer'), {
onrendered: function(canvas) {
//这里返回了一个canvas
}, width : width*2 , height : height*2
然后很山寨的就把我的问题解决了。但也带来了后续的问题：
如果子元素的左右边距不对称怎么办？这个可以继续改offsetX。
如果子元素做了translate该怎么办？我没正面解决这个问题，而是在生成canvas前把这个元素的translate值增大了两倍。期待日后可以看到更优雅的解决方案。
感谢的启发了我。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
前端开发学习、总结
· 3130人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：使用HTML5 Canvas实现图片马赛克模糊_网页特效_何问起
您的位置： -
使用HTML5 Canvas实现图片马赛克模糊
效果请点击下面网址：
一、开门见山
受美国肖像画家Chuck Close的启发，此脚本通过使用HTML5 canvas元素把图像转换成像素形式，这基本上是一个为canvas imageData功能的简单演示。此脚本现存于GitHub上，您可以在那里下载到脚本和示例。在GitHub上查看像素化资源二、选项此方法接受一个对象数组，每个对象都拥有一组选项。
resolution : 渲染像素间的像素距离，必须的。
shape : 像素的形状。 接受的选项有：square, circle, 以及diamond。可选，默认是square。
size : 渲染像素的像素大小值，可选，默认值是resolution。
offset : 偏移像素。可选，默认是0。可以是一个单独的值15实现对角线偏移，或者是个数组或X/Y关键字的对象实现偏移：
[ 15, 5 ] 或 { x: 15, y: 5 }。
alpha : 小数值，指渲染的透明度。 可选，默认是1。三、代码示例要想让图片像素化，首先调用如下脚本：&script type=&text/javascript& src=&/texiao/html5/1/js/close-pixelate.js&&&/script&然后调用方法closePixelate，更具体的是：
图片dom.closePixelate(选项参数)
此脚本可以应用于各类图片。根据HTML5规范，浏览器禁止任何外部托管图片上使用getImageData ()，但是，多亏了John Schulz的巨大贡献，通过使用Max Novakovic的getImageData API，进一步像素化具有内置的方法来解决这个安全特征。&img id=&pixelExample2& src=&pixel-example.jpg& width=&300& height=&426& /&在你的脚本中使用closePixelate方法与图片上，你可以通过一组数组选项控制图片输出。如下示例代码：
document.getElementById(&#39;pixelExample2&#39;).closePixelate( [
{ resolution: 24 }
] );html代码如下：&!doctype html&&html lang=&zh&&&head&
&meta charset=&UTF-8&&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&title&基于HTML5 Canvas实现的图片马赛克模糊特效-何问起&/title&
&link rel=&stylesheet& type=&text/css& href=&1/css/normalize.css& /&
&link rel=&stylesheet& type=&text/css& href=&1/css/default.css&&
&style type=&text/css&&
margin-left: 5
.thumb img
max-width: 400
&/style&&/head&&body&
&div style=&width:760margin:0px auto&&
&h2&基于HTML5 Canvas的图片马赛克模糊特效 何问起&/h2&
&a href=&&&首页&/a& &a href=&/hvtart/bjae/160ced36cb3a6a86.htm&&原文&/a& &a href=&/texiao/html5/1/tupianmohu.rar& target=&_self&&下载&/a&
&a href=&/texiao/&&特效库&/a&&br /&
&div class=&container&&
&div class=&content bgcolor-8&&
&p class=&center&&
改变模糊度
&input type=&range& min=&4& max=&100& value=&6& id=&range& /&
&span id=&output&&6&/span&&/p&
&div class=&thumb&&
&img src=&1/img/1.jpg& id=&dolly1& /&
&img src=&1/img/2.jpg& id=&dolly2& /&
&img src=&1/img/3.jpg& id=&dolly3& /&
&script src=&/texiao/html5/1/js/close-pixelate.js&&&/script&
window.onload = function () {
var dolly1 = document.getElementById(&#39;dolly1&#39;)
var dolly2 = document.getElementById(&#39;dolly2&#39;)
var dolly3 = document.getElementById(&#39;dolly3&#39;)
var pixelOpts = [{ resolution: 8}]
var pixelDolly1 = dolly1.closePixelate(pixelOpts)
var pixelDolly2 = dolly2.closePixelate(pixelOpts)
var pixelDolly3 = dolly3.closePixelate(pixelOpts)
var range = document.getElementById(&#39;range&#39;)
var output = document.getElementById(&#39;output&#39;)
range.addEventListener(&#39;change&#39;, function (event) {
var res = parseInt(event.target.value, 10)
res = Math.floor(res / 2) * 2
res = Math.max(4, Math.min(100, res))
output.textContent = res
// console.log( res );
pixelOpts = [{ resolution: res}]
pixelDolly1.render(pixelOpts)
pixelDolly2.render(pixelOpts)
pixelDolly3.render(pixelOpts)
&/script&&/body&&/html&