遇见更好的自己

正在成长的前端小白

html5--canvas学习

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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuwengai/article/details/51541543
文章标签: html5 javascript 图形
个人分类: HTML(5)
想对作者说点什么? 我来说一句

canvas绘制粒子

2016年09月04日 3KB 下载

没有更多推荐了,返回首页

不良信息举报

html5--canvas学习

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭