
在git上看到canvas知识,然后进行整理
一、规则
以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右
二、准备工作:布置画布、获取画布、获取画笔
<canvas id=“canvas”></canvas> var canvas = document.getElementById("canvas") var context = canvas.getContext("2d")三、分类
3、1:线条
移动画笔:context.moveTo(100,100),画笔起点
画笔停点:context.linrTo(600,600),画笔终点
画笔粗细的配置:context.lineWidth='5'
画笔颜色的配置:context.strokeStyle="#353537"
绘制类型:fill()填充 、stroke()描边
beginpath()开始绘制,可以使后面的线段的颜色等不覆盖前面的,结束绘制为fill()、stroke()、closePath()
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(30,30);
context.lineTo(20,40);
context.lineTo(20,20);
context.closePath();//不使用closePath结束绘制,左上角的会有缺口,用closePath的时候可以不用进行结尾,即最后一笔可以不画
context.lineWidth = '2'; //线条粗细
context.strokeStyle = ' #228B22';//线条颜色
context.fillStyle = "yellow";//内容填充色
context.stroke();//描边结束
context.fill(); //绘制结束
3、2:矩形,结合上面的知识点,矩形直接上例子就可以了window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); rectfun(context,80,80,100,100,2,'black','white'); rectfun(context,85,85,90,90,2,'black','white'); rectfun(context,87,87,85,85,1,'black','white'); rectfun(context,90,90,80,80,2,'black','white'); rectfun(context,100,100,60,60,2,'black','white'); rectfun(context,110,110,40,40,2,'black','white'); rectfun(context,120,120,20,20,2,'black','white'); rectfun(context,130,130,1,1,2,'black','white'); }
function rectfun(cxt,x,y,width,height,borderwidth,bordercolor,fillcolor){ cxt.beginPath(); cxt.rect(x,y,width,height);//生成矩形 // cxt.closePath() 使用rect的时候,closePath可以不用 cxt.lineWidth = borderwidth;//宽度 cxt.strokeStyle = bordercolor;//颜色 cxt.fillStyle = fillcolor;//填充色 cxt.stroke(); cxt.fill(); }矩形效果图如下:
3、3:线条属性,共有4个属性
3.3.1、lineCap属性(线条的帽子):定义线的终点属性,有3个属性值(这些属性只会在终点起作用,折线处不会起作用)
* butt:默认值,端点是垂直于线段边缘的平直边缘。 * round:端点是在线段边缘处以线宽为直径的半圆。 * square:端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。
例子:
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.lineWidth = 50; context.strokeStyle = "#1BAAAA"; context.beginPath(); context.moveTo(100,100); context.lineTo(700,100); context.lineCap = "butt"; context.stroke(); context.beginPath(); context.moveTo(100,300); context.lineTo(700,300); context.lineCap = "round"; context.stroke(); context.beginPath(); context.moveTo(100,500); context.lineTo(700,500); context.lineCap = "square"; context.stroke(); //下面画两个基准线方便观察 context.lineWidth = 3; context.strokeStyle = "black"; context.beginPath(); context.moveTo(100,0); context.lineTo(100,600); context.moveTo(700,0); context.lineTo(700,600); context.stroke(); }
效果:
3.3.2、lineJoin(线条的连接),定义折线处的属性,直接看代码和效果就可以明白
代码:
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100,100); context.lineTo(300,300); context.lineTo(100,500); context.lineJoin = "miter"; context.lineWidth = 20; context.strokeStyle = "red"; context.stroke(); context.beginPath(); context.moveTo(300,100); context.lineTo(500,300); context.lineTo(300,500); context.lineJoin = "bevel"; context.lineWidth = 20; context.strokeStyle = "blue"; context.stroke(); context.beginPath(); context.moveTo(500,100); context.lineTo(700,300); context.lineTo(500,500); context.lineJoin = "round"; context.lineWidth = 20; context.strokeStyle = "black"; context.stroke(); }
效果:
3.3.3、当lineJoin设置为miter时(默认),此时可以使用miterLimit属性(不常用)
例子:
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100,100); context.lineTo(300,300); context.lineTo(100,500); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "red"; context.stroke(); context.beginPath(); context.moveTo(300,200); context.lineTo(500,300); context.lineTo(300,400); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke(); context.beginPath(); context.moveTo(500,290); context.lineTo(700,300); context.lineTo(500,310); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); }
效果:原理链接:http://7xkcl8.com1.z0.glb.clouddn.com/edu6-4.png
3、4填充颜色
3.4.1填充基本颜色
(1)颜色字符串填充
context.fillStyle = "red";
(2)十六进制字符串
context.fillStyle = "#FF0000";
(3)rgb
context.fillStyle = "rgba(255,0,0,1)";
(4)hsl()
context.fillStyle = "hsl(0,100%,50%)";
(5)hsla()
context.fillStyle = "hsla(0,100%,50%,1)";
3、5填充渐变形状,线性和径向
3.5.1线性渐变
例子:
var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.rect(200,100,400,400);//x起始坐标 y起始坐标 宽 高 //添加渐变线 var grd = context.createLinearGradient(200,300,600,300); //xstart,ystart,xend,yend 从(200,300)到(600,300)的径向 //添加颜色断点 grd.addColorStop(0,"black"); grd.addColorStop(0.5,"white"); grd.addColorStop(1,"black"); //应用渐变 context.fillStyle = grd; context.fill();
效果:
3.5.2绘制矩形的快捷方式
`fillRect(x,y,width,height)`、`stroke(x,y,width,height)`。这两个函数可以分别看做`rect()`与`fill()`以及`rect()`与`stroke()`的组合。因为`rect()`仅仅只是规划路径而已,而这两个方法确实实实在在的绘制。例子,直接看例子就可以直接看明白:
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); //添加渐变线 var grd = context.createLinearGradient(100,300,700,300);////xstart,ystart,xend,yend 从(100,300)到(700,300)的径向 //添加颜色断点 grd.addColorStop(0,"olive"); grd.addColorStop(0.5,"aqua"); grd.addColorStop(0.75,"fuchsia"); grd.addColorStop(0.25,"teal"); //应用渐变 context.fillStyle = grd; context.strokeStyle = grd; context.strokeRect(200,150,450,50); context.fillRect(200,300,300,50); }
效果:
3、6:填充样式,createPattern()填充图案,需要传递两个参数createPattern(img,repeat-style),第一个对象是img实例,第二个对象是string类型,有4种填充类型,repeat,repeat-x,repeat-y,no-repeat,第一种参数还可以传入一个canvas或者是video对象,这里只说img对象,其余的自己尝试
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); var img = new Image();//创建img对象 img.src = "1.jpg";//为img对象指定图片源 img.onload = function(){ var pattern = context.createPattern(img, "repeat");//指定类型 context.fillStyle = pattern;//纹理填充 context.fillRect(0,0,800,600);//快速制作矩形的方法,xstart,ystrart,width,height }
效果图:(代码里面img使用onload,是对图片进行预加载,)
3、7:绘制标准圆弧arc()函数
arc(x,y,r,startAngle,endAngle,anticlockwise)
x,y圆心坐标,r半径,
startAngle:开始的弧度值,endAngle:结束的弧度值
anticlockwise:表示绘制的方法(用布尔值进行表示),是(false)顺时针还是(true)逆时针,当此值不填写的时候,默认为false,顺时针,弧度值得规则如图:
例子:(我画的准备图的是随便在浏览器的页面上画的,请自动忽略无用的背景)
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FFF"; context.fillRect(0,0,800,600); context.beginPath(); context.arc(150,250,50,Math.PI, Math.PI * 3 / 2); context.lineTo(250,200); context.arc(250,250,50,Math.PI* 3 / 2, Math.PI *2); context.lineTo(300,400); context.arc(250,400,50,0, Math.PI*1/2); context.lineTo(150,450); context.arc(150,400,50,Math.PI*1/2, Math.PI); // context.lineTo(100,250); context.closePath(); context.strokeStyle = "#0078AA"; context.stroke();
(准备图)
(效果图)
3、8:切点绘制圆弧arcTo()
- 上一篇 json JSON