canvas学习之API整理笔记（一）

//获取canvas容器
var can = document.getElementById(‘canvas');
//创建一个画布
var ctx = can.getContext(‘2d');

var canWid = can.width; //canvas 的宽度
var canHei = can.height; //canvas 的高度

//填充矩形（x, y是横纵坐标，原点在canvas的左上角）
ctx.fillRect(x, y, width, height);
//边框矩形，默认1px 黑色。 
ctx.strokeRect(x, y, width, height);
//清除指定的矩形区域，变为透明
ctx.clearRect(x, y, width, height); //绘制动态效果时，常用来清除整个画布

//新建路径，beginPath是绘制新图形的开始
ctx.beginPath()
//路径（线）的起点，一般在上面这条命令后执行
ctx.moveTo(x, y) 
//线的终点
ctx.lineTo(x, y) 
//绘制圆形
ctx.arc(x, y, r, start, end, true/false) //x, y圆心，r半径，start和end是开始和结束角度，false表示顺时针（默认），true表示逆时针。
//绘制弧线
ctx.arcTo(x1, y1, x2, y2, r); //当前端点、(x1,y1)和(x2,y2)这三个点连成的弧线，r是半径。
//闭合路径，不是必须的，如果线的终点跟起点一样，会自动闭合。
ctx.closePath()
//通过线条绘制轮廓（边框）
ctx.stroke() 
//通过路径填充区域（实心）
ctx.fill()

ctx.beginPath();
ctx.moveTo(75, 50); //路径起点
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill(); //自动将路径闭合，并默认填充黑色。

ctx.fillStyle = 'red' //针对fill()有效的颜色，还可以取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。
ctx.strokeStyle = 'red' //针对stroke()有效的颜色，取值同上。
ctx.globalAlpha = 0.5; //透明度

ctx.lineWidth = 2; //线条宽度
ctx.lineCap = 'butt(默认)'、'round(圆弧)'、'square(方形)' //线段端点显示的样式

var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
ctx.strokeStyle = 'black';
for (var i=0;i

var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;
for (var i=0;i

ctx.setLineDash([4, 2]) //设置虚线，参数为数组，第一个值为实现宽度，第二个值为空白的宽度
ctx.lineDashOffset = 0; //虚线起始偏移量

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var offset = 0;
function draw() {
 offset++; 
 if (offset > 16) { 
 offset = 0; 
 }
 ctx.clearRect(0,0, can.width, can.height); 
 ctx.setLineDash([6, 2]); 
 ctx.lineDashOffset = -offset; 
 ctx.strokeRect(10,10, 100, 100);
}
setInterval(draw, 20);

var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定义线性渐变，渐变的起点 (x1,y1) 与终点 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定义径向渐变
bg.addColorStop(0, 'red'); //定义好，之后开始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');

var bg = ctx.createLinearGradient(0, 0, 0, 200); //线性渐变
bg.addColorStop(0, 'black');
bg.addColorStop(0.6, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(10, 10, 100, 100);

var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); //径向渐变
bg1.addColorStop(0, '#FF5F98');
bg1.addColorStop(0.75, '#FF0188');
bg1.addColorStop(1, 'rgba(255,1,136,0)');
ctx.fillStyle = bg1;
ctx.fillRect(0,0,150,150);

var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2; //X轴阴影距离，负值表示往上，正值表示往下
ctx.shadowOffsetY = 2; //Y轴阴影距离，负值表示往左，正值表示往右
ctx.shadowBlur = 2; //阴影的模糊程度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //阴影颜色
ctx.fOnt= "30px Times New Roman"; //设置字体和字体大小
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 15, 30); //实体文字
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 15, 100); //边框文字

ctx.fOnt= '20px Times New Roman';
ctx.textAlign = 'center'; //start, end, left, right or center
ctx.textBaseline = 'middle' //top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = 'inherit' //ltr, rtl, inherit

var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0); //img为图像，(0, 0)为起始坐标

ctx.drawImage(document.getElementById('img'), 0, 0);

ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 150, 150);
ctx.save(); //保存当前状态
ctx.fill#fff';
ctx.fillRect(45, 45, 100, 100);
ctx.restore(); //恢复到刚才保存的状态
ctx.fillRect(70, 70, 50, 50);

var ctx = document.getElementById('canvas').getContext('2d');
for(var i = 1; i<4; i++) {
 ctx.save(); //使用save方法保存状态，让每次位移时都针对（0，0）移动。
 ctx.translate(100*i, 0);
 ctx.fillRect(0, 50, 50, 50);
 ctx.restore();
}

ctx.translate(75,75); //把原点移动到(75, 75);
for (var i=1; i<6; i++){ // 从里到外一共6圈
 ctx.save();
 ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
 for (var j=0; j

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.scale(0.8, 1.2);
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();