canvas学习笔记

canvas标签的系统学习笔记

一、canvas

用于图形绘制容器，具体的图形绘制需要依赖js。
浏览器支持

chrom	ie	firefox	safari	opera
4.0	9.0	2.0	3.1	9.0

二、创建canvas

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

//使用js创建图形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

var ctx=c.getContext(“2d”)目前只支持参数传2d,只画布是二维画图

绘制一个颜色为#ff0宽为150高为75的矩形图（下行代码块）

ctx.fillStyle="#FF0";
ctx.fillRect(0,0,150,75);

三、 Canvas - 路径

绘制线条
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

绘制圆
beginPath() ：
丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)
当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。

context.arc(x,y,r,sAngle,eAngle,counterclockwise)

• x,y圆心坐标
• r圆的半径
• sAngle圆的起始角，弧度记
• eAngle圆的结束角，弧度记
• counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
  

四、 Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：
font ： 定义字体
fillText(text,x,y) ： 在 canvas 上绘制实心的文本
strokeText(text,x,y) ： 在 canvas 上绘制空心的文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);


//空心
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

五、 Canvas - 渐变

两种不同的颜色渐变样式

• createLinearGradient(x,y,x1,y1) ： 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) ： 创建一个径向/圆渐变
  

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

fillStyle值属性
color:填充颜色;
gradient：用于填充绘图的渐变对象（线性或放射性）;
pattern:用于填充绘图的 pattern 对象;

六、 Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

学习地址