看视频,做笔记:
1.例子:
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fileRect(0,0,800,600);
context.fillStyle = 'rgba(255,255,0,0.5)';
context.fillRect(400,200,800,600);
</script>
2.填充矩形区域
context.fillRect(x,y,w,h); //填充矩形区域,设置参数
context.strokeRect(x,y,w,h); //矩形区域边界绘制
context.clearRect(x,y,w,h); //橡皮擦,将矩形区域内内容擦除
3.颜色指定方式(红色为例)
#FF0000、#F00、rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0, 1.0)、rgba(100%,0%,0%, 1.0)、hsl(0,100%,50%)、hsla(0,100%,50%, 1.0) 、red等等。
4.阴影效果
context.shadowOffsetX = 2.0;
context.shadowOffsetY = 2.0;
context.shadowColor = "rgba(50%,50%,50%,0.75)"; //阴影颜色
context.shadowBlur = 2.0; //模糊程度
5.填充效果
渐变色效果又分为线性渐变、中心区域渐变。
线性渐变:
var linGrad = context.createLinearGradient(0,450,1000,450); // 起始位置到截止位置
linGrad.addColorStop(0.0,'red'); //渐变中节点
linGrad.addColorStop(0.5,'yellow');
linGrad.addColorStop(0.75,'orange');
linGrad.addColorStop(1.0,'purple');
context.fillStyle = linGrad; //应用到图形上
context.fillRect(0,450,1000,450);
中心区域渐变:
var radGrad = context.createRadialGradient(260,320,40,200,400,200); //定义渐变区域(x0,y0,r0,x1,y1,r1)
radGrad.addColorStop(0.0,'yellow'); //定义节点
radGrad.addColorStop(0.9,'orange');
randGrad.addColorStop(1.0,'rgba(0,0,0,0)');
context.fillStyle = radGrad; // 定义填充对象
context.fillRect(0,200,400,400);
6.手绘
context.beginPath();
context.moveTo(300,700);
context.lineTo(600,100);
context.lineTo(900,700);
context.moveTo(350,400);
context.lineTo(850,400);
context.stroke();
绘制过程:开始绘制beginPath() --->定义所有节点---> 用stroke实现绘制。
绘制抛物线:context.quadraticCurveTo(cpx,cpy,x,y)
贝塞尔曲线:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
自定义曲线:context.arcTo(x1,y1,x2,y2,radius)
以弧度坐标标定义弧:context.arc(x,y,radius,startAngle,endangle,anticlockwise)