目录视图
摘要视图
订阅
分类：
在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
查看评论
