canvas 个人简约笔记
- 基础代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 画布 -->
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
路径
基本的
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "10"; //线条的肥瘦
ctx.strokeStyle = "red"; // 红色路径
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke(); // 进行绘制
ctx.beginPath(); //线条的开始
ctx.strokeStyle = "blue"; // 蓝色路径
ctx.lineWidth = "2"; //线条的肥瘦
ctx.moveTo(50, 0); //起点坐标，把路径移动到画布中的指定点
ctx.lineTo(150, 130); //下一个点 的坐标
ctx.lineTo(100, 30); //下一点的坐标
ctx.closePath(); //闭合路径。
ctx.fillStyle="green";
ctx.fill(); //填充
ctx.stroke(); // 进行绘制 ，必须
ctx.clip() 只有裁剪区域是可见的
//关键代码如下
ctx.rect(50,20,200,120);// (x,y,宽，高)
ctx.stroke();
ctx.clip(); //在它下面的代码，都要被裁剪
// Draw red rectangle after clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
ctx.quadraticCurveTo() 二次贝塞尔曲线
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);// 开始点
ctx.quadraticCurveTo(20,100,200,20);//(20,100,*,*)控制点，(*,*,200,20)结束点
ctx.stroke();
ctx.bezierCurveTo() 三次贝塞尔曲线
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);//开始点
ctx.bezierCurveTo(20,100,200,100,200,20);//(20,100...)控制点1 (...,200,100，...)控制点2 (...,200,20)结束点
ctx.stroke();
ctx.arc() 创建弧/曲线（用于创建圆或部分圆）
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);//(圆心x,圆心y,半径,起始角度，结束角度)
ctx.stroke();
ctx.beginPath();
ctx.arc(100,75,50,90/360*2*Math.PI,1*Math.PI,true); //默认是false 顺时针 true为逆时针
ctx.stroke();
ctx.arcTo() 创建介于两个切线之间的弧/曲线。
ctx.beginPath();
ctx.moveTo(20,20); // 创建开始点
ctx.lineTo(100,20); // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧 (起点x,起点y,终点x,终点y,半径)
ctx.lineTo(150,120); // 创建垂直线
ctx.stroke();
ctx.isPointInPath(20,50)
- 如果指定的点位于当前路径中，则返回 true，否则返回 false
矩形
ctx.rect()、ctx.fillRect()、ctx.strokeRect()、ctx.clearRect()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
//最右边的这个矩形
ctx.strokeRect(250,70,50,50); //绘制矩形（不填色）。笔触的默认颜色是黑色。
ctx.lineWidth="6";
ctx.strokeStyle="red";
//红色边框的矩形
ctx.rect(20,20,100,20); //（左上角x,左上角y,宽，高）。红色线条的那个
ctx.stroke(); // rect默认是没有线条的，若加了线条，也要加 ctx.stroke(); （个人理解）
//全黑的矩形
ctx.fillRect(50,50,150,50); //填充矩形，默认黑色。直接这样即可，因无线条。
//红色被扣掉的矩形
ctx.fillStyle="red";
ctx.fillRect(100,100,150,50);
ctx.clearRect(120,120,25,25); //清空给定矩形内的区域
线条样式
ctx.lineCap( butt | round | square ) 属性设置或返回线条末端线帽的样式。ctx.lineWidth 线条宽度
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round"; //向线条的每个末端添加圆形线帽
// 看第二个、第三个就知道了
// ctx.lineCap="butt | square"; //默认。正方形。两个值的都是正方形
ctx.lineWidth=15
ctx.moveTo(20,20);
ctx.lineTo(100,100);
ctx.stroke();
ctx.lineJoin( miter | round | bevel ) 属性设置或返回所创建边角的类型，当两条线交汇时。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// ctx.lineJoin="miter"; //尖角。第一个
ctx.lineJoin="round"; // 圆角。第二个
// ctx.lineJoin="bevel"; //斜角。第三个。调 ctx.lineWidth=30 可看到明显效果
ctx.moveTo(120,20);
ctx.lineWidth=10
ctx.lineTo(200,50);
ctx.lineTo(120,100);
ctx.stroke();
ctx.miterLimit 属性设置或返回最大斜接长度
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter"; //只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效
ctx.miterLimit=5; //第一个。意思是，在两条线交汇处内角和外角之间的距离 不得超过5
// ctx.miterLimit=3; //第二个。若超过限制时，以 bevel 显示
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();