canvas 图像的平铺

所谓平铺，指的是用按一定比例缩小的图像填满画布。HTML5中通过调用画布上下文对象的createPattern方法实现图像平铺，该方法应用格式为：createPattern(image,type)

其中参数image为被平铺对象，type表示图像平铺方式。type可取值有四种。

类型	说明
no-repeat	不平铺图像
repeat-x	水平方向平铺图象
repeat-y	垂直方向平铺图像
repeat	全方向平铺图像

案例：

<fieldset><legend>图像平铺</legend><canvas id="canvas" width="500px" height="500px"></canvas><br><button onclick="draw(1)">横向平铺</button><button onclick="draw(2)">纵向平铺</button><button onclick="draw(3)">全向平铺</button></fieldset><script>function draw(i) {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var img = new Image();img.src = "img.jpg";img.onload = function() {if (i == 1) {ctx.fillStyle = ctx.createPattern(img, "repeat-x")} else if (i == 2) {ctx.fillStyle = ctx.createPattern(img, 'repeat-y');} else {ctx.fillStyle = ctx.createPattern(img, 'repeat');}ctx.fillRect(0, 0, canvas.width, canvas.height); //填充画布}}</script>

canvas 图像的平铺相关推荐

css图像的平铺,cssbackground-image如何平铺？
以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好.若您的网站要求兼容浏览器低版本,建议用这种方法.css3的出现,解决了一个div只 ...
图像平铺_制作无缝平铺图像的五个步骤
图像平铺 Images brought onto a web page via CSS as backgrounds have the advantage of automatic tessellat ...
css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法（学习笔记）
一.设置背景颜色在CSS当中,网页元素的背景颜色使用background-color属性来设置,和文本颜色的用法类似. 用法 <style>h2{color:red;backround- ...
Css的背景（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）
文章目录 1.CSS的元素显示模式 1.1 什么是元素显示模式 1.2 块元素 1.3 行内元素 1.4 行内块元素 1.5 元素显示模式总结 1.6 元素显示模式转换 2.盒子模型:网页布局的基础 ...
黑马程序员前端-CSS背景：颜色、图片、平铺、背景图片位置、背景图像
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
html去图片平铺效果,css如何把图片平铺？
css如何把图片平铺?下面本篇文章给大家介绍一下使用css设置背景图片平铺方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. background-repeat属性用于定义背景图像 ...
Halcon平铺tile三算子浅析
Halcon平铺tile三算子浅析文章目录 Halcon平铺tile三算子浅析 1. 平铺三算子 2. tile_channels 3. tile_images 4. tile_images_off ...
php 不要平铺的代码,css怎么设置图片不平铺
css设置图片不平铺的方法:首先创建一个HTML示例文件:然后在style标签中添加"background:url(img/3.jpg)no-repeat;}"来设置图片不平铺即可 ...

canvas 图像的平铺

案例：

canvas 图像的平铺相关推荐

最新文章

热门文章