Canvas绘图你需要了解这些

这是我参与 8 月更文挑战的第 6 天，活动详情查看： 8月更文挑战

绘制图像

语法：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

• img规定要使用的图像、画布或视频。
• sx,sy,swidth,sheight 均为可选值。定义剪切图像相关的位置和宽高
• width,height 图像的宽度和高度

绘制文本

语法：

//填充文本
context.fillText(text,x,y,maxWidth);
//描边文本
context.strokeText(text,x,y,maxWidth);
//measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
context.measureText(text).width;

• font文字属性：context.font="italic small-caps bold 12px arial";默认10px sans-serif
• textAlign对齐属性：context.textAlign="center|end|left|right|start";
• textBaseline 文本基线：context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

绘制图形

创建线性渐变（用在画布内容上）

渐变可用于填充矩形、圆形、线条、文本等等;请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

语法:

//线性渐变
context.createLinearGradient(x0,y0,x1,y1);
//放射状/圆形渐变对象
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

//绘制渐变颜色，*stop*介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
gradient.addColorStop(stop,color);

颜色、样式和阴影

• fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
• strokeStyle 设置或返回用于笔触的颜色、渐变或模式

context.strokeStyle=color|gradient|pattern; |\

context.fillStyle=color|gradient|pattern;

//createPattern() 方法在指定的方向内重复指定的元素。
// 元素可以是图片、视频，或者其他 <canvas> 元素。
// 被重复的元素可用于绘制/填充矩形、圆形或线条等等。
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

设置阴影

context.shadowColor=color; context.shadowBlur=number; context.shadowOffsetX=number; context.shadowOffsetY=number;

DEMO

渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");

ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

径向/圆形渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");

ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

图像填充

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");

ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

视频转canvas

<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>