canvas杂记
canvas标签
<canvas width=600 height=400></canvas>
//1. 拿到画布
var canvas = document.querySelector("canvas");
//2. 创建画图工具（画家）， 本质上是个js专门用来绘图的一个对象; 它提供了所有的关于绘图的属性和方法
var context = canvas.getContext("2d");
画线api
1. moveTo(x,y)
2. lineTo(x,y)
3. stroke() //描边
4. fill() //填充
其他一些api：
1. beginPath()
//创建新的玻璃纸
//为了避免重复印刷，我们就重新创建一张新的空白的玻璃纸，将后面要绘制的图形，画在这个新的玻璃纸上
2. closePath()
//把路径闭合
设置颜色api
//描边
//默认情况下， 填充色和描边都是黑色的
//设置描边色
context.strokeStyle = "red"; //颜色的写法和css写法是一样的
context.stroke();
//填充
//设置填充色
context.fillStyle = "yellowgreen";
context.fill();
关于路径填充问题-非零填充原则
//非零填充原则
//在由路径围成的区域内部，任意一个点， 拉一条射线。 看和这个射线相交的路径有几条。 路径的方向是顺时针，就是1. 如果逆时针，就是-1， 把所有的值相加， 如果是0， 就不填充， 如是非0， 就填充
例子（自己体会）：
//画两个三角形
//顺时针绘制
context.moveTo(0, 100);
context.lineTo(400, 100);
context.lineTo(400, 400);
//把路径闭合
context.closePath();
//路径是逆时针绘制
context.moveTo(200, 200);
context.lineTo(300, 240);
context.lineTo(300, 200);
context.closePath();
context.fillStyle = "red";
context.fill();
绘制矩形api
1.直接传入 x， y， width， height， 就可以绘制一个矩形
context.rect(100, 100, 200, 200);
context.strokeStyle = "red";
context.stroke();
context.fillStyle = "yellow";
context.fill();
2. 直接创建一个描边的矩形
//创建玻璃纸， 画矩形路径， 描边， 把玻璃纸销毁
context.strokeStyle = "red";
context.strokeRect(100, 100, 200, 200);
3. 直接创建一个填充的矩形
//创建玻璃纸， 画矩形路径， 填充， 把玻璃纸销毁
context.fillRect(100, 100, 200, 200);
//注意： 黄色的边不会显示，是因为上面那一句，画完之后，就把玻璃纸销毁了
context.strokeStyle = "yellow";
context.stroke();
绘制圆型api
语法：
context.arc(x, y, radius, startRadian, endRadian, direction);
画弧形：
context.arc(300, 200, 100, 0, 0.5*Math.PI); //画弧形
context.stroke();
画扇形：
//从31度的地方，画到81度的地方
context.arc(300, 200, 100, 31/180*Math.PI, 81/180*Math.PI);
//画完扇形之后，再画线到圆心， 再关闭路径
context.lineTo(300, 200);
context.closePath();
context.fill();
线条api
1. 线条粗细
//设置线条的粗细， 不需要加px
context.lineWidth = 15;
2. 线条头部
//线条的头部的设置
context.lineCap = "round"; //默认是butt， 记住round
线性渐变
1. 需要创建出一个渐变对象
var gradient = context.createLinearGradient(100, 100, 300, 380);
2. 添加渐变颜色
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "hotpink");
gradient.addColorStop(1, "yellowgreen");
3. 将渐变对象设为填充色
context.fillStyle = gradient;
4. 通过fillRect画一个矩形
context.fillRect(100, 100, 200, 280);
径向渐变
1. 创建渐变对象
//内圆
var c1 = {x: 260, y: 160, r: 0};
//外圆
var c2 = {x: 300, y: 200, r: 120};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
2. 填色
gradient.addColorStop(0, "red");
gradient.addColorStop(0.3, "yellow");
gradient.addColorStop(0.6, "green");
gradient.addColorStop(1, "orange");
3. 将渐变对象设为填充色
context.fillStyle = gradient;
4. 画圆并填充
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
阴影
//和css3相比， 阴影只能设一个， 不能设内阴影
//水平偏移， 垂直的偏移， 模糊程度， 阴影的颜色
//设置阴影的参数
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "yellowgreen";
//画一个矩形
context.fillStyle = "red";
context.fillRect(100, 100, 300, 200);
文字
//绘制文字
//text就是要绘制的文字， x， y就是从什么地方开始绘制
context.strokeText("text", x, y)
context.font = "60px 微软雅黑";
context.strokeText("hello, world", 100, 100);
// context.fillText("hello, world", 100, 100);
文字的对齐方式
//垂直方向
context.textAlign = "left"; //left,right,center，默认是left
//水平方向
context.textBaseline = "middle"; //top,middle,bottom,默认top
图片绘制
var image = new Image();
image.src = "./img/gls.jpg";
1. 3参数
image.onload = function () {
context.drawImage(image, 100, 200);
}
2. 5参数
//图片绘制5参模式（缩放模式）, 就是将图片显示在画布上的某一块区域（x, y, w, h）,如果这个区域的宽高和图片不一至，会被压缩或放大
image.onload = function () {
context.drawImage(image, 100, 100, 100, 100);
}
3. 9参数
/*
参数的解释：
image： 就是大图片本身
中间的四个参数， 代表从图片的150， 0的位置，截取 150 * 200的一块区域
后面的四个参数， 将刚才截取的小图， 显示画布上 100， 100， 150， 200的这个区域
*/
context.drawImage(image, 150, 0, 150, 200, 100, 100, 150, 200);
例子：图片放大器
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//1. 加载图片
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
//1. 先把大图画在右上角
context.drawImage(image, 0, 0, 150, 100);
//创建一个矩形的路径
context.rect(0, 0, 150, 100);
//2. 判断当前鼠标是否hover到上面的图片上了
canvas.onmousemove = function (event) {
//原图和左上角的图的比例是3： 1
var x = event.offsetX;
var y = event.offsetY;
//当前 x， y这个点的位置，是否在玻璃纸上的路径的区域的内部
if (context.isPointInPath(x, y) == true) {
console.log("在内部");
x = x * 3 - 20;
y = y * 3 - 20;
//每一次在画之前，先把之前画的擦除
//某300， 200， 300， 200这个区域的东西全部擦除
context.clearRect(300, 200, 300, 200);
//从x， y这个点，截取40*40的局部小图，显示在图布， 300， 200， 80， 80这个区域，就形成了一个放大的效果
context.drawImage(image, x, y, 40, 40, 300, 200, 120, 120);
}
}
</script>
清除
context.clearRect(300, 200, 300, 200);
缩放
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(300, 200, 100, 100);
context.scale(0.5, 0.5);
context.fillRect(300, 200, 100, 100);
平移
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(0, 0, 100, 100);
context.translate(300, 200);
context.fillRect(0, 0, 100, 100);
旋转
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.rotate(30/180*Math.PI);
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
动画
function draw() {
//清空画布
context.clearRect(0, 0, canvas.width, canvas.height);
window.requestAnimationFrame(draw);
}
draw();
save、restore
//save保存， restore恢复， 还原
//save的作用，是把context的当前的状态，保存起来;
//restore是把context最近一次保存的状态还原
demo:
context.fillStyle = "red";
context.strokeStyle = "blue";
context.shadowColor = "cyan";
//把当前的context整个保存一份
context.save(); //就会把当前的context整个保存一份
context.fillRect(100, 100, 100, 100);
context.fillStyle = "green";
context.fillRect(300, 200, 100, 100);
//把最近保存的那个context直接拿过来用
context.restore();
context.fillRect(500, 300, 100, 100);
