一、规则
以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()
。。。