canvas知识点

看到网上某些特别好看的效果，就突然想看看这个canvas;

canvas是html5中的一个标签。所以兼容的是Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 这些浏览器；

1.新建一个canvas,并且用js显示一个矩形

html
<canvas id="mycanvas" width="500" height="500" style="border:1px solid red"></canvas>

js
var my=document.getElementById("mycanvas");//获取到canvas的元素
var gd=my.getContext("2d");//将这个元素换成2d
gd.fillStyle="#cc0000";//填充的颜色
gd.fillRect(0,0,200,200);//矩形的位置和宽高 起始位置，结束位置，宽，高

2.矩形：

rect(0,0,100,100);//创建矩形

fillRect(0,0,100,100)；//绘制被填充的矩形

strokeRect(0,0,100,100);//绘制矩形（无填充）

clearRect（0,0,100,100）;//在矩形中清空

3.线条样式

lineCap=""//末端线的样式（butt默认 round圆形 square正方形）

lineJoin=""//边角的类型，两条线的交汇处

lineWidth=//线的宽度

miterLimint=//倾斜角度

closePath()创建从当前点连接到起始点的

4.颜色样式和阴影

fillStyle//颜色 渐变

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

srokeStyle//笔触的颜色、渐变或模式。

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

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100); 

shadowColor//阴影的颜色。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

shadowOffsetX//设置或返回阴影与形状的水平距离。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

shadowOffsetY//设置或返回阴影与形状的垂直距离

createLinearGradient()//在画布的内容上创建线性渐变

createRadialGradient()//在画布的内容上创建环形渐变

createPattern()//在在制定的方向上重复指定的元素

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();

addColorStop()//渐变对象中指定停止的位置

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

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

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

5.路径

fill()填充绘制的内容

stroke()绘制已定义的内容

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="red";
ctx.stroke(); 

beginPath()起始一条路径或者重置当前路径

moveTo()把路径移动到画布中的指定点 不创建线条

lineTo()添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

clip()在画布中剪裁任意形状

arc(x,y,r,起始角度，结束角度，顺时针还是逆时针)

arcTo(起始点的x坐标，起始点的y坐标，结束点的x坐标，结束点的y坐标，r)创建介于两个切线之间的弧/曲线。

6.转换

scale()

rotate()

translate()

transform()

7.图像绘制

drawImage（img,开始剪裁的x位置，开始剪裁的y位置，被剪裁的宽度，被剪裁的高度，在画布上放置的x位置，在画布上放置的y位置，要使用的图片的宽度，要使用的图片的高度）

<canvas id="mycanvas" width="700" height="500"></canvas>
        <img src="img/img.png" id="img"/>
        <script>
        var my=document.getElementById("mycanvas");
        console.log(my);
        var canvas=my.getContext("2d");
        
        var img=document.getElementById("img");
        img.onload=function(){
            canvas.drawImage(img,10,10,200,200,100,100,50,50);
        };

 

8像素的操作

createImageData()创建新的空白的imagedata对象

getImageData()返回imagedata对象，该对象为画布上指定的矩形复制像素数据。

putImageData()图像数据（从指定的 ImageData 对象）放回画布上。