canvas 画svg,canvas svg webgl

　　本文适合对画布绘制、图形和前端可视化感兴趣的读者。

　　楔子

　　凡事皆有因。

　　最近产品需要做这样一个功能：染一些图形。想想看，这不是一件容易的事。我研究印染技术已经很长时间了。于是我把之前写的两个算法发给我的小伙伴，请他参考实现。第一个算法是操纵像素，第二个算法使用图像合成：globalCompositeOperation。

　　凡事都有可能出乎意料，尤其是写程序。

　　没过多久，小伙伴说第二种算法在火狐下不行。

　　探索原因

　　听说有bug，我很震惊。我测试过，在火狐下测试过。于是我打开火狐，启动例子，发现不错，没问题。

　　但是，小伙伴融入产品有一个问题。有什么区别？一起查了一下，终于发现我的样本代码和产品里的代码有一点不同：样本代码用的是png图片，而产品用的是svg图片。

　　是svg图片的问题吗？把一个svg图像放到样本代码中确实是错误的。结论很明显：

　　在FireFox下，用Canvas绘制SVG时，globalCompositeOperation的设置不会生效。

　　以下是用于测试的代码。CTX。GlobalCompositeOperation= destination-out 表示用源图像的形状挖空目标图像。

　　在其他浏览器中，下面的代码是有效的，是挖空的。但是在

　　在FireFox下不起作用：

　　htmlhead脚本函数init(){ var canvas=document . getelementbyid( c )；var CTX=canvas . get context( 2d )；var img=new Image()；img . onload=function(){ CTX . draw image(img，0，0，img.width * 2，img . height * 2)；CTX . globalcompositeoperation= destination-out ；} img . src= diffuse . png ；var svg=新图像；svg.src=。/d . SVG ；函数drawPoint(pointX，pointY) { ctx.drawImage(svg，pointX - svg.width/4，pointY - svg.height/4，svg.width/2，SVG . height/2)；} canvas . addevent listener( click ，函数(e) { drawPoint(e.clientX，e . clienty)；}，假)；}/script/head body onload= init()；style= background:red div canvas id= c width= 1000 height= 1000 /canvas/div/body/html如何解决

　　我找到了问题的原因，解决方法其实很简单。

　　这是常有的事。很多时候，发现问题比解决问题更难。

　　解决方案其实很简单。

　　在代码中增加一个判断，判断浏览器是否是FireFox。

　　如果是，首先在临时画布上绘制svg图片。

　　随后的绘图用临时画布替换svg图像。

　　例如，上面的代码可以改进如下：

　　函数init(){ var canvas=文档。通过id( c )获取元素；var CTX=画布。获取上下文(“2d”)；var img=new Image():img。onload=函数(){ CTX。绘制图像(img，0，0，img.width * 2，img。高度* 2)；CTX。全局合成=目的地-输出；} img。src=扩散。pngvar svg=新影像：svg.src= ./d . SVG:var temp canvas=SVG:if(isfirefox){ SVG。onload=function(){ temp canvas=document。创建元素(“canvas”)；tempcanvas。宽度=svg。widthtempcanvas。高度=svg。heightvar tempctx=tempcanvas。获取上下文(“2d”)；tempCtx.drawImage(svg，0，0，svg.width，svg。身高)；} }函数绘制点(pointX，point){ CTX。绘制图像(tempcanvas，pointX - svg.width/4，point-SVG。高度/4，重力，宽度/2，重力身高/2)；}画布。addevent监听器( click ，function(e){ draw point(e . client x，e . client))；}，false}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。