Canvas 笔记
创建 canvas
想使用 canvas ,首先需要在 dom 中声明一块区域(画布)并初始化画布的尺寸
<canvas id="canvas" width="200" height="100"></canvas>
使用 js 绘制
canvas 需要使用 js 在声明的画布上进行绘画。
定位 canvas
let c=document.getElementById("canvas");
创建 context 对象
let cxt=c.getContext("2d");
getContext() 的可能取值有四种
* "2d"
* "webgl"
* "webgl2" (或 "experimental-webgl2")
* "bitmaprenderer"
绘制
比如绘制一个红色长方形
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
坐标系
规定,画布左上角坐标为原点(0,0);x 轴正方向水平向右,y 轴正方向为竖直向下。
fillRect()
方法拥有参数(0,0,150,75)。意思是从画布左上角(0,0)开始,绘制一个 x 方向长度为 150,y 方向长度为 75 的图形。
canvas 方法
线条
比如画个绿色的 L,L 起始位置为(20,20),竖线长度为80,横线长度为50,颜色为 green
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); //开始路径
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="green";
ctx.lineWidth = 10;
ctx.stroke();
弧线
sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角,以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
弧
角度从 0 到 Pi 的弧,逆时针绘制
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI,true);
ctx.stroke();
圆形
比如画一个被填充的圆形,圆心坐标为 (70,18),半径为 15,颜色为 天依蓝
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#66ccff";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2倍的Math.PI
矩形
矩形框
使用lineWidth
属性设置框的粗细
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
填充矩形
使用fillStyle
属性来设置用于填充绘图的颜色、渐变或模式。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#66ffcc"; //初音绿
ctx.fillRect(20,20,150,100);
渐变
context.createLinearGradient(x0,y0,x1,y1);
方法创建线性的渐变对象
x0,y0 为渐变开始点的坐标
x1,y1 为渐变结束点的坐标
gradient.addColorStop(stop,color);
方法规定 gradient 对象中的颜色和位置。
stop 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值
比如定义一个红色到绿色的渐变色谱,起始位置为(0,0),结束位置为(175,50),其实颜色为 red,最终颜色为 green。
```js
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
## 绘制
可以向画布上绘制图像、画布或视频
`context.drawImage(img,x,y);`
在纺织图片的时候可以规定图片的宽高
`context.drawImage(img,x,y,width,height);`
还可以规定裁剪方式
`context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);`
sx 开始剪切的 x 坐标位置。
sy 开始剪切的 y 坐标位置。
swidth 被剪切图像的宽度。
sheight 被剪切图像的高度。
```js
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
绘制视频也是允许的
<!DOCTYPE html>
<html>
<body>
<p>要使用的视频:</p>
<video id="video1" controls width="270" autoplay>
<source src="/example/html5/mov_bbb.mp4" type='video/mp4'>
<source src="/example/html5/mov_bbb.ogg" type='video/ogg'>
<source src="/example/html5/mov_bbb.webm" type='video/webm'>
</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);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
</script>
</body>
</html>