canvas初学笔记整理
任何一门语言都是长期不用就容易忘记语法，这次抽时间整理了一下，以备后面需要时使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas知识点笔记整理</title>
<style>*{margin: 0;padding: 0;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
let doc = document.documentElement || document.body;
canvas.setAttribute('width',doc.offsetWidth);
canvas.setAttribute('height',doc.clientHeight);
class Canval{
constructor(ctx){
this.pi = Math.PI / 180;
this.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
}
demo(){
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
ctx.beginPath();
ctx.moveTo(150,20);
ctx.lineTo(150,70);
ctx.lineTo(180,45);
ctx.fill();
ctx.beginPath();
ctx.arc(200,200,50,0,this.pi*360,false);
ctx.moveTo(235,200);
ctx.arc(200,200,35,0,this.pi*180,false);
ctx.moveTo(180,190);
ctx.arc(180,190,1,0,this.pi*360,false);
ctx.moveTo(185,190);
ctx.arc(180,190,5,0,this.pi*360,false);
ctx.moveTo(220,190);
ctx.arc(220,190,1,0,this.pi*360,false);
ctx.moveTo(225,190);
ctx.arc(220,190,5,0,this.pi*360,false);
ctx.stroke();
}
demo1(){
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
ctx.beginPath();
var x = 500 + 20*j;
var y = 50 + 20*i;
var angleDirect = i % 2 == 0 ? false : true;
ctx.arc(x,y,5,0,this.pi*(90*j+180),angleDirect);
angleDirect ? (ctx.stroke()) : (ctx.fill());
ctx.closePath();
}
};
ctx.save();
ctx.translate(600,0);
ctx.beginPath();
ctx.moveTo(40,80);
ctx.quadraticCurveTo(35,35,100,37.5);
ctx.quadraticCurveTo(135,37.5,130,80);
ctx.quadraticCurveTo(130,100,70,100);
ctx.quadraticCurveTo(75,120,50,130);
ctx.quadraticCurveTo(70,90,40,100);
ctx.quadraticCurveTo(40,70,40,80);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(800,100);
ctx.fillStyle = 'red';
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.bezierCurveTo(40,-20,20,40,0,40);
ctx.bezierCurveTo(-20,40,-40,-20,0,0);
ctx.fill();
ctx.save();
}
rect(){
ctx.beginPath();
for(var i = 0; i < 6 ;i++){
var x = 50 + i*20;
var y = 40;
ctx.rect(x,y,10,10);
ctx.fillRect(x,y+40,10,10);
ctx.stroke();
}
}
path2d(){
var circle = new Path2D();
circle.moveTo(100,100);
circle.arc(80,100,10,0, this.pi*360);
ctx.stroke(circle);
}
fillStyle(){
for(var i = 0; i < 3; i++){
for(var j = 0; j < 3;j++){
ctx.fillStyle = `rgba(200,${50+i*50},${100+j*50},1)`
ctx.fillRect(50+j*10,10*i,10,10);
}
}
}
fillArc(){
for(let i = 0; i < 10; i++){
for(let j = 0; j <10; j++){
ctx.strokeStyle = `rgba(100,${255-i*2.5},${255-j*2.5},.3)`;
ctx.beginPath();
ctx.arc(50+j*20,20*i+20,5,0,this.pi*360,false);
ctx.stroke();
}
}
}
globalAlpha(){ //透明
ctx.fillStyle = 'orange';
ctx.fillRect(20,20,40,40);
ctx.fillStyle = 'green';
ctx.fillRect(60,20,40,40);
ctx.fillStyle = '#09F';
ctx.fillRect(20,60,40,40);
ctx.fillStyle = '#F30';
ctx.fillRect(60,60,40,40);
ctx.globalAlpha = '.2';
ctx.fillStyle = 'white';
for(var a = 0; a < 10; a++){
ctx.beginPath();
ctx.arc(60,60,5*a,0,this.pi*360,false);
ctx.fill();
}
}
lineWidth(){
for(let i = 0; i < 10; i++){
ctx.beginPath();
ctx.lineWidth = i*1;
ctx.moveTo(20*i+20,20);
ctx.lineTo(20*i+20,40);
ctx.stroke();
}
}
lineargradient(){ //渐变
var LinearGradient = ctx.createLinearGradient(0,100,100,100); //四个参数初始xy，终点xy
LinearGradient.addColorStop(0,'white'); //一个参数为渐变位置，0-1；
LinearGradient.addColorStop(0.5,'red'); //可以设置多个渐变色；
LinearGradient.addColorStop(1,'black'); //0-1为开始到终点的范围；
ctx.fillStyle = LinearGradient;
ctx.fillRect(0,0,100,100);
}
RadialGradient(){// 径向渐变 1,2,4,5参数为原点，3，6参数为起始范围和终点范围半径；
var radia = ctx.createRadialGradient(100,100,0,100,100,80);
radia.addColorStop(0,'orange');
radia.addColorStop(0.5,'green');
radia.addColorStop(1,'pink');
ctx.fillStyle = radia;
ctx.arc(100,100,80,0,this.pi*360,false);
ctx.fill();
}
createPattern(){ // 图案样式，可以设置一个图案的背景样式， backgroud-image类似；
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function(){
var pattren = ctx.createPattern(img,'no-repeat');
//第二个参数：repeat，repeat-x，repeat-y 和 no-repeat；
ctx.fillStyle = pattren;
ctx.fillRect(0,0,1000,1000);
}
}
shadow(){
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = -2; //这两个参数值一样，正往右下，负值往上左；
ctx.shadowBlur = 2; // 模糊程度；
ctx.shadowColor = 'green'; //阴影颜色；
ctx.font = '40px';
ctx.fillStyle = 'black';
ctx.fillText('demo shadow',50,50);
}
fill(){ //填充规则 nonzero 和 evenodd
ctx.arc(50,50,50,0,this.pi*360,false);
ctx.arc(50,50,20,0,this.pi*360,false);
ctx.fill('evenodd');
}
text(){ //绘制文本
// 实体文字和空心文字：第一个参数为文本，后面两个为xy位置；
ctx.font = '30px serif'; //字体样式
// ctx.textAlign = 'center';
//var len = ctx.measureText('demo') //测试文本宽度；
ctx.textBaseline = 'top';
ctx.fillText('hello canvas',20,50);
ctx.shadowOffseY = -2;
ctx.shadowOffsetX = 2;
ctx.shadowBlur = 5;
ctx.shadowColor = 'green';
ctx.strokeText('hello canvas',20,100);
}
img(){
// drawImage() //第一个参数为img，2，3为xy位置，4，5为宽高；6，7为截取放置位置，8，9为大小
//4，5图片大小，决定了裁剪后图片的裁剪位置；
var img = new Image();
img.src = this.src;
img.onload = function(){
ctx.drawImage(img,0,0,100,100,100,100,40,40);
};
}
saveAndRestore(){ //ctx.save() 保存到栈中， ctx.restore() 从栈中恢复上一次参数；
ctx.fillRect(0,0,400,400);
ctx.save();
ctx.fillStyle = 'black';
ctx.globalAlpha = 0.5;
ctx.fillRect(20,20,360,360);
ctx.save();
ctx.fillStyle = 'orange';
ctx.globalAlpha = 1;
ctx.fillRect(40,40,320,320);
ctx.restore();
ctx.fillRect(60,60,280,280);
ctx.restore();
ctx.fillRect(80,80,240,240);
}
translate(){ //例子
for(var j = 0; j <3; j++){
for(var i = 0; i < 3; i++){
ctx.save();
ctx.translate(20*i+20,20+20*j);
ctx.strokeStyle = 'green';
ctx.strokeRect(0,0,10,10);
ctx.restore();
}
}
}
rotate(){
ctx.translate(400,400);
for(var i = 1 ; i <= 6; i++){
ctx.save();
for(var j = 0; j <i*6; j++){
ctx.beginPath();
ctx.rotate( (this.pi*360) / (i*6) );
ctx.arc(i*10,0,5,0,this.pi*360,false);
ctx.stroke();
ctx.closePath();
};
ctx.restore();
}
}
scale(){ //缩放
// 这个缩放和css3里面的不一样 ，这个类似于翻书对称翻转，js默认右下为正向；scale(-1,-1)可以反转成数学里面的笛卡尔坐标系
//数值越大会使得像素变大，导致内容变大
ctx.scale(-1,1);
ctx.fillText('demo',-40,20);
}
demo2(){
ctx.translate(100,100);
var pi = this.pi;
for(var i = 0; i < 12; i++){
ctx.save();
ctx.globalAlpha = (1-0.08*i);
ctx.rotate( (pi*360)/12 * i);
ctx.fillRect(12,0,30,5);
ctx.restore();
};
}
globalCompositeOperation(){ //图像的合成与裁剪 //暂时还没掌握
let operation = null;
ctx.globalCompositeoperation = 'destination-over';
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(200,200,20,0,this.pi*360,false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'orange';
ctx.arc(215,220,20,0,this.pi*360,false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'pink';
ctx.arc(230,200,20,0,this.pi*360,false);
ctx.fill();
}
drawStar(r,color){ //绘制
ctx.save();
ctx.beginPath()
ctx.moveTo(r,0);
for (var i=0;i<9;i++){
ctx.rotate(Math.PI/5);
if(i%2 == 0) {
ctx.lineTo((r/0.525731)*0.200811,0);
} else {
ctx.lineTo(r,0);
}
}
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
random(max,min){
return Math.floor( Math.random()*(max-min)+min );
}
draw(){
var colorSkin = ['red','orange','blue','pink','green'];
ctx.arc(100,100,100,0,this.pi*360,false);
// ctx.clip(); // 裁剪区域，让裁剪区域内显示内容
for(var i = 0;i<100;i++){
var x = this.random(doc.offsetWidth,20);
var y = this.random(doc.offsetHeight,20);
var r = this.random(10,2);
var randColor = this.random(5,0);
ctx.save();
ctx.translate(x,y);
this.drawStar(r,colorSkin[randColor]);
ctx.restore();
}
}
drawClock(){
var pi = Math.PI/180;
ctx.translate(400,400);
ctx.rotate(pi*-60);
// ctx.save();
for( let i = 0; i < 12 ; i++ ){ //hour
ctx.save();
ctx.rotate(pi*(360/12*i));
ctx.moveTo(200,0);
ctx.lineTo(220,0);
ctx.font = '10px serif';
ctx.fillText(i+1,190,0);
ctx.stroke();
ctx.restore();
};
for( let i = 0; i < 60;i++ ){ //min
if( i % 5 !== 0 ){
ctx.save();
ctx.rotate(pi*(360/60)*i);
ctx.moveTo(210,0);
ctx.lineTo(220,0);
ctx.stroke();
ctx.restore();
}
};
var pis = pi;
function draw(){
let timer = new Date();
let hour = timer.getHours(),
minutes = timer.getMinutes(),
seconds = timer.getSeconds();
let secondsAngle = pis*(360/60)*seconds;
let minutesAngle = pis*(360/60)*minutes;
let hourAngle = pis*(360/(12)*hour);
ctx.save();
ctx.beginPath();
ctx.rotate(secondsAngle);
ctx.moveTo(0,0);
ctx.lineTo(120,0);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.rotate(hourAngle);
ctx.moveTo(0,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.rotate(minutesAngle);
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke();
};
draw();
}
}var initCanvas = new Canval(ctx);
;</script>
</body>
</html>
