HTML5培训

CANVAS使用clip有锯齿的解决方案

发布时间:2013年 10月 12日   |  作者:风吟子

在开发基于HTML5-CANVAS的特效时,我们经常会用到clip这个方法,用来实现一些裁剪效果。然而在chrome中对它支持的并不是非常好,通过clip裁出来的图像会有锯齿感。对比下面两个图就能清楚看出来。

上图为chrome的情况

上图为safari的情况

上面效果的核心代码为:

// 设置裁剪区域
ctx.beginPath();
ctx.arc(150,150,70,0,Math.PI*2,true);
ctx.clip();
ctx.closePath();
// 绘制要被裁剪的图像
ctx.fillStyle = '#0a87d6';
ctx.fillRect(0,0,300,300);

这个效果不止出现在裁圆圈上,任何曲线的裁剪都会出现这种情况。我们可以单纯的把它理解为chrome执行clip时候的一个不足,或者是bug,因为chrome再执行其他曲线绘制的时候并不会出现锯齿。譬如执行以下代码的时候,就不会出现锯齿:

// 设置裁剪区域
ctx.beginPath();
ctx.arc(150,150,70,0,Math.PI*2,true);
ctx.strokeStyle = '#0a87d6';
ctx.stroke();
ctx.closePath();

这个问题的解决办法就要用到canvas中的globalCompositeOperation(关于globalCompositeOperation的入门自行补习)。

解决思路:创建一个临时的canvas,用以使用globalCompositeOperation进行模拟裁剪效果。然后将该临时canvas绘制在原canvas上即可。

关键代码如下:

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
// 创建一个临时canvas用以绘制裁剪图像
var scratchCanvas = document.createElement("canvas");
scratchCanvas.width = 300;
scratchCanvas.height = 300;
var scratchCTX = scratchCanvas.getContext("2d");
scratchCTX.save(); // 创建一个单独的区域
// 先把要裁剪的图像画出来
scratchCTX.fillStyle = '#0a87d6';
scratchCTX.fillRect(0,0,300,300);
// 然后利用globalCompositeOperation实现裁剪效果
scratchCTX.fillStyle = "#000"; // 颜色不重要,但是需要全不透明
scratchCTX.globalCompositeOperation = 'destination-in'; 
scratchCTX.beginPath(); 
scratchCTX.arc(150,150,70,0,Math.PI*2,true);
scratchCTX.closePath();
scratchCTX.fill(); 
scratchCTX.restore();
// 将裁剪出来的图像绘制在原canvas上
ctx.drawImage(scratchCanvas,0,0);

得到的图像如下:

相关文章
推荐大家使用的CSS书写规
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0503568649292s)