html5--canvas学习
来源:互联网 发布:云熙家具软件 编辑:程序博客网 时间:2024/06/05 06:32
HTML5 canvas 元素用于图形的绘制,canvas 标签只是图形容器,您必须使用脚本(通常是JavaScript)来绘制图形。
1.创建一个画布
//设置大小和边框<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
2.使用JavaScript来绘制图像
<script>var c=document.getElementById("myCanvas");//创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。var ctx=c.getContext("2d");//fillStyle属性可以是CSS颜色,渐变,或图案ctx.fillStyle="#FF0000";//在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。ctx.fillRect(0,0,150,75);</script>
3.路径
//绘制线条var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);//线条开始的坐标ctx.lineTo(200,100);//线条结束的坐标ctx.stroke();
//绘制圆形var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";//设置字体ctx.fillText("Hello World",10,50);//实心文本ctx.strokeText("Hello World",10,50);//空心文本
4.把一副图像放置到画布上
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");ctx.drawImage(img,10,10);
5.
这是一段实时在画布上显示视频的代码,像两个窗口在同时播放。
第一个窗口是实时的播放一段视频。
第二个窗口是没20毫秒在画布绘图一次,看起来也是一段连续的视频播放,当暂停或者视频结束时,取消定时绘图。
<!DOCTYPE html><html><body><p>要使用的视频:</p><video id="video1" controls width="270" autoplay><source src="video1.mp4" type='video/mp4'></video><p>画布(每 20 毫秒,代码就会绘制视频的当前帧):</p><canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var v=document.getElementById("video1");//获取视频var c=document.getElementById("myCanvas");//创建画布ctx=c.getContext('2d');v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);//如果是播放,每20毫秒绘图一次v.addEventListener('pause',function() {window.clearInterval(i);},false);//视频暂停,取消定时绘图v.addEventListener('ended',function() {clearInterval(i);},false); //视频结束,取消定时绘图</script></body></html>
0 0
- HTML5 Canvas 学习
- HTML5 Canvas 学习(1)
- 学习HTML5-Canvas
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- html5学习canvas
- html5 canvas 学习笔记
- HTML5学习之-Canvas
- html5--canvas学习
- HTML5 Canvas知识点学习笔记
- HTML5学习笔记-canvas 标签
- 学习HTML5 canvas第一天
- HTML5----Canvas 学习笔记一
- html5学习canvas图像处理
- HTML5学习(四)---Canvas绘图
- HTML5 canvas画布 学习实例
- 【HTML5学习笔记】画布Canvas
- 算法菜鸟Leetcode之旅-1
- hive的学习笔记2-hive源码的编译
- ListView优化整理
- Scala隐式转换之隐式参数(1)
- 开始写blog了
- html5--canvas学习
- 关于PDB与DLL
- 安装tushare库
- 第一篇博文
- gbk编码表
- Leetcode 172. Factorial Trailing Zeroes
- R语言实战之高级数据管理
- utf8编码表
- C++函数参数传递与返回值优化技巧