牛宝宝文章网 > HTML 5 > canvas

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);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
</script>Cavans 渐变

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);</script>

扩展：html学习笔记 / html5学习笔记 / 如何做html学习笔记

牛宝宝文章网 > HTML 5 > canvas

canvas

① 主要作用：绘制矢量图()② 矢量图图形（路径）-（ILL） 位图图像（像素点）- PS中图像都是位图③ Canvas 能够制作动画,但是不是为了制作动画而生的也能够制作游戏。主要为了绘图而生。④ 能够设置宽高 推荐样式写在style；Canvas 相当于是一个绘制图形的容器，并没有绘制功能，需要借助JS（脚本）实现绘制功能。

思路：

getContext( )var context = cnvas.getContext('2d'); // 图像的绘制
// 开始 beginPath（）开始路径
// 起点
// 过程路径
// 终点
// 落笔
// 结束 closePath（）结束路径

方法：

beginPath（） 开始路径moveTo（x,y） 把路径移到画布中指定点 不创建路径lineTo（x,y） 添加一个新点closePath（） 结束路径fillStyle 用来设置填充颜色stroke 绘制异地内衣好的路径fill（） 填充已定义好的路径

context.lineWidth=5;主要书写顺序 先颜色再填充

<script>
var cnvas = document.getElementById('cnvas');
var context = cnvas.getContext('2d');
context.moveTo(200,100);
context.lineTo(600,100);
context.lineTo(600,300);
context.lineTo(200,300);
context.lineTo(200,100);
context.closePath();
context.fillStyle = 'red';
context.stroke(); // 描边
context.fill(); // 填充颜色
</script>

矩形的绘制：rect（x，y，w，h） ：x y为起始坐标 w,h为矩形的宽 高fillRect