canvas知识点

时间:2022-03-05 23:39:03

看到网上某些特别好看的效果,就突然想看看这个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 对象)放回画布上。