Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/reporting-services/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Image 如何使用画布绘制此背景形状?_Image_Html_Canvas_Background - Fatal编程技术网

Image 如何使用画布绘制此背景形状?

Image 如何使用画布绘制此背景形状?,image,html,canvas,background,Image,Html,Canvas,Background,在我正在进行的一个设计中,有一个重复出现的图像背景形状,在整个站点中以不同的大小多次出现。例如,一个页面将其用作巨大的背景图像,其中该图像的顶部和底部被浏览器边缘切断 这不是一个简单的模式来创建画布,但据我所知,这是可能的。这是它的样子 我最好是制作几个相同图案的图像,还是这个背景图像很容易通过画布重新创建?如果它适合画布,我该如何以各种尺寸重新创建它?我希望我知道如何使用canvas开始类似的工作,但这超出了我的技能范围。我已将您的形状转换为SVG形状:-根据需要使用它 根据,SVG在除IE

在我正在进行的一个设计中,有一个重复出现的图像背景形状,在整个站点中以不同的大小多次出现。例如,一个页面将其用作巨大的背景图像,其中该图像的顶部和底部被浏览器边缘切断

这不是一个简单的模式来创建画布,但据我所知,这是可能的。这是它的样子


我最好是制作几个相同图案的图像,还是这个背景图像很容易通过画布重新创建?如果它适合画布,我该如何以各种尺寸重新创建它?我希望我知道如何使用canvas开始类似的工作,但这超出了我的技能范围。

我已将您的形状转换为SVG形状:-根据需要使用它

根据,SVG在除IE8和更早版本之外的所有常见浏览器上都受支持

对于IE8和早期版本,您可能能够将SVG到画布库与IE8和早期版本的画布仿真器相结合。或者,您可以显示一个带有背景色的矩形,即用户可能不会错过splat


编辑:你也可以使用CSS3背景渐变、ala(仅使用CSS创建的著名徽标)进行创作,但不同浏览器之间的兼容性很低。

哇,为什么我没有想到这一点?非常感谢。我知道有svg文件,但如何将这些代码转换成文件?我自己对svg文件的了解还不够。请查看上的“参考资料:”标题-您甚至可以将其嵌入
标记中,如。好的,很好,我将查找不同的参考资料,并希望了解如何将代码转换为svg文件。再次感谢。哦,我应该问另一件事。如果用画布标记相同的图形,代码的大小会比svg大还是小?我正在尝试内联而不是嵌入,以节省渲染/加载时间和网站使用HTML5的请求量。哦,哇,我看到操纵大小和颜色并不容易或直接。我不确定这是否行得通。哦,今天早些时候我看到了CSS3背景链接。它看起来真的很好,但没有大量的尝试和错误,我不知道如何快速地为它编写代码!我是否缺少一些可以让人们轻松编写SVG、Canvas或CSS3 BG图像的链接?还是每个人都比我快得多?哈哈