canvas教程

HTML5 canvas平铺的代码详解

字号+ 作者:H5之家 来源:H5之家 2017-04-21 08:02 我要评论( )

最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽2

最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽200px)

由于一开始是drawImage出来的,所以采用了方法one

var canvas = document.getElementById("canvasId"); var ctx = canvas.getContext("2d"); var img = new Image(); //需要平铺的图片 img.src = "test1_bg.jpg"; img.onload = function (){ var can = document.createElement("canvas"); can.width = 10; can.height = 10; var ctx2 = can.getContext("2d"); ctx2.drawImage(img,0,0,10,10,0,0,10,10); ctx.fillStyle = ctx.createPattern(can,"repeat"); ctx.fillRect(0,0,200,200); }

用到了背景图的高宽度10,有点繁琐,为什么不一步到位呢?所以改成了这种方式

var canvas = document.getElementById("canvasId"); var ctx = canvas.getContext("2d"); var img = new Image(); //需要平铺的图片 img.src = "test1_bg.jpg"; img.onload = function (){ var pat = ctx.createPattern(img,"repeat"); ctx.rect(0,0,200,200); ctx.fillStyle = pat; ctx.fill(); }

GOOD!
再来重申下createPattern定义

createPattern() 方法在指定的方向内重复指定的元素。
元素可以是图片、视频,或者其他 <canvas> 元素。
被重复的元素可用于绘制/填充矩形、圆形或线条等等。

JavaScript 语法:

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

参数 描述



repeat默认。规定要使用的图片、画布或视频元素。

repeat-x该模式只在水平方向重复。

repeat-y该模式只在垂直方向重复。

no-repeat该模式只显示一次(不重复)。

以上就是HTML5 canvas平铺的代码详解的详细内容,更多请关注php中文网其它相关文章!

一 介绍

1、<audio>和<video>元素有不少监听" target="_blank">事件,因此可以绑定这些事件的监听器。

2、本应用实现<video>的ontimeupdate事件的监听器。

3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。

二 代码

<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 视频播放 </title> </head> <body> <h2> 视频播放 </h2> <video id="mv" src="movie.webm" loop> 您的浏览器不支持video元素 </video><br/> <input id="bn" type="button" value="播放"/><span id="detail"></span>秒 <script type="text/javascript"> var bn = document.getElementById("bn"); var mv = document.getElementById("mv"); var detail = document.getElementById("detail"); // 为video元素的ontimeupdate事件绑定监听器 mv.ontimeupdate = function() { detail.innerHTML = mv.currentTime + "/" + mv.duration; }; bn.onclick = function() { if(mv.paused) { mv.play(); bn.value = "暂停"; } else { mv.pause(); bn.value = "播放"; } } </script> </body> </html>

三 运行结果

1463.png

以上就是HTML5的音频和视频监听器的应用代码详解的详细内容,更多请关注php中文网其它相关文章!

  • 的九个标签,非常不错,需要的朋友参考下

    今天新学习了9个标签、

    <audio> 简单的说就是一个音频标签,他的主要常用属性有src=""音频的路径 controls="controls" 控制参数,他就是可以让其在页面显示一个播放器的效果autoplay="autoplay"自动播放属性 loop="loop"循环次数

    <video>同audio标签一样。是一个视频标签。主要常用的属性同上面一样

    <datalist>定义选项列表。这个其实是一个比较大的改进,不过也有不足,这个标签其实组合了《input标签中的text》和select标签、生产的一个可以输入和下拉选项的输入组合框》。不足之处在于如果不通过JS控制,只有当输入框中为空,定义的下拉选项中才会生效

    <details>定义文档细节。这个标签其实用的地方也比较多,常和summary标签用。summary标签里面写文档的标题。p标签写文档的细节

    <mark>一个高亮的显示标签,再也不用标记某一段文字要用font属性了。

    <menu>快速创建一个list列表。用法是menu li结合

    <address>存放地址的标签

    <progress>这个是一个进度条标签。他的主要属性有value和max。value表示当前进度条位置,max表示进度条的总共长度。

    <time>标签放时间的标签。

    初步接触html5的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。


    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Html5学习之路</title> </head> <body> <header style="text-align: center; color: blue;">欢迎来到Html5的学习之路,我是header标签。</header> 这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来 <input type="text" list="phone"> <datalist id="phone"> <option></option> <option>IPhone</option> <option>华为 </option> <option>小米 </option> <option>三星</option> </datalist> <br/> <br/> <font color="red">这里我发现了两者一个不同之处在于,datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font> <br/> 而这个select选项框是不管什么内容它都会存在的 <select> <option>IPhone</option> <option>华为 </option> <option>小米 </option> <option>三星</option> </select> <br> <br> <br> ------------------------ <br><br><br> 这是一个定义文档细节的标签。detail标签。它的主要作用很简单。 <details> <summary>这是一个detail标签,下面就是他的使用方法</summary> <p>detail标签是什么?</p> <p>detail标签有什么作用?</p> <p>detail标签能干什么?</p> <p>detail标签我改怎么用它?</p> </details> <br> detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签<mark>mark</mark>比重不一样。 <br><br> 接下来这个标签是定义列表标签。menu。 <menu> <li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li> </menu> <br><br> 进度条标签我们用的比较多。比如这个。<mark>progress</mark> <progress value="5" max="10">value=5 max=10</progress> <br> <audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio> <footer>我是底部footer标签</footer> </body> </html>

    以上就是Html5新增了哪些标签的详细内容,更多请关注php中文网其它相关文章!

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5课程设计论文

      html5课程设计论文

      2017-04-18 09:03

    • 可创建gooey效果抖动窗口的jquery插件

      可创建gooey效果抖动窗口的jquery插件

      2017-04-15 10:00

    • html5使用canvas绘制时钟示例

      html5使用canvas绘制时钟示例

      2017-04-14 15:06

    • [Html5]html5视频播放器播放视频截图功能的实例

      [Html5]html5视频播放器播放视频截图功能的实例

      2017-04-14 12:00

    网友点评