Canvas笔记

canvas


// 注意：canvas的宽高 必须写在html元素上，不要会出现问题。
<canvas id="can" width="500px" height="500px"></canvas>


<script>
window.onload = function(){
var can = document.getElemnetById("can");
var ctx = can.getContext("2d");

//矩形
ctx.fillStyle = "red" // 实心 下笔的颜色
ctx.fillRect(50,50,100,100) // 实心矩形 参数分别为：x、y轴、宽、高
ctx.strokeStyle = "red" // 空心 下笔的颜色
ctx.lineJoin = "miter/round/bevel"  //(拐角类型) 直角、圆角、方角
ctx.lineWidth = 6 // 边框宽度
ctx.strokeRect(50,50,100,100) // 空心矩形 参数分别为：x、y轴、宽、高


// 文本
ctx.textAlign = "start/end/left/right/center";文字根据 x轴 坐标 进行位子定位
ctx.textBaseAlign = "top/hanging/middle/alphabetic/bottom" 文字根据 y轴 坐标 进行位子定位
ctx.font = "200 14px 微软雅黑" // 文字粗细 字体大小 样式
ctx.fillText("大家好",x轴,y轴)； // 实心文字
ctx.strokeText("大家好",x轴,y轴)； // 空心文字

// 设置阴影
ctx.shadowBlur = 6 // 阴影的浮点值，值越大 越模糊。
ctx.shasowColor = "red" // 阴影颜色
ctx.shadowOffsetX = 5  // x 方向
ctx.shadowOffsetY = 5  // y 方向


// 绘制路径 
ctx.beginPath() // 打开路径
ctx.moveTo(50,50) // 起点
ctx.lineTo(150,150) // 终点
ctx.rect(60,60,200,100)  //rect()也可以画矩形，参数和fillRect一样，注意：必须是在beginPath 和 storke之间。
ctx.closePath();// 关闭路径
ctx.strokeStyle = "red";
ctx.lineWidth = 10;
ctx.stroke(); // 开始下笔绘制

// 弧形
ctx.arc(x,y,r,起始角,结束角,可选（true逆时针/false顺时针）)// 例：arc(100,100,50,0,2*Math.PI); 起始角和结束角（0-2之间，可以是小数）左下右上，起始角一般都是0，结束角为2*Math.PI就是圆

//  贝塞尔曲线
moveTo(左上坐标);
bezierCurveTo(左下坐标，右下坐标，右上坐标)；


// 线性渐变
var gred = ctx.createLinearGradient(渐变开始坐标，渐变结束坐标)；（0,0,200,100）;
gred.addColorStop(0.4,"black");// 参数（0-1之间取值，结束位置显示颜色）；
gred.addColorStop(0.4,"white");// 参数（0-1之间取值，结束位置显示颜色）；
ctx.fillStyle = gred; // 填充渐变颜色；
ctx.filleRect(0,0,200,100);// 渐变的矩形


// 圆形渐变
var g = creatRadialGradient(开始圆心坐标1，开始半径1，结束圆心坐标2，结束半径2)；注：一般半径1 大于 半径2 ；
g.addColorStop(0.4,"black");// 参数（0-1之间取值，结束位置显示颜色）；
g.addColorStop(0.4,"white");// 参数（0-1之间取值，结束位置显示颜色）；
ctx.fillStyle = gred; // 填充渐变颜色；
ctx.filleRect(0,0,200,100);// 渐变的矩形


// 对图片的处理
var img = new Image();
img.src = "image/logo.png";


// 1.缩放
ctx.drawImage(img,200,50,100,80);
参数：
1：img元素对象
2、3：图片位置（x、y坐标）；
4、5：图片大小（宽、高）；


// 2.截取
ctx.drawImage(img,0,0,60,60,50,50,60,60);
参数
1：img元素对象
2：切割起始x坐标
3：切割起始y坐标
4：切割的width
5：切割的height
6：切割完成后放在的位置x坐标
7：切割完成后放在的位置y坐标
8：切割完成后的width
9：切割完成后的height
}


</script>