1，色彩

有两个属性设置色彩：
fillStyle
strokeStyle

随机色彩

setInterval(() => draw(pen), 1000);

function draw(pen) {
    
    
	pen.fillStyle = `rgba(${
      
      random(0, 255)},${
      
      random(0, 255)},${
      
      random(0, 255)})`
	pen.rect(0, 0, 300, 300)
	pen.fill()
}
function random(x, y) {
    
    
	return Math.round(Math.random() * (y - x) + x);
}

效果：

2，透明度

globalAlpha

随机透明度的黑色

pen.globalAlpha = random(0, 100) / 100
pen.clearRect(0, 0, 300, 300)
pen.rect(0, 0, 300, 300)
pen.fill()

效果：

3，线条

lineWidth：粗细。
会中心对齐。

用粗线画矩形

pen.lineWidth = 300
pen.beginPath();
pen.moveTo(0, 0);
pen.lineTo(300, 0);
pen.closePath();
pen.stroke();

效果：

lineCap：末端类型。
butt截断，默认
round半圆突出
square半宽的矩形突出

用末端画圆弧

pen.lineWidth = 300
pen.lineCap = 'round'
pen.beginPath()
pen.moveTo(0, 150)
pen.lineTo(150, 150)
pen.stroke();

效果：

lineJoin：转折处的样式
round圆滑
bevel截断
miter延长至相交，默认

miterLimit
延长的限度

虚线
setLineDash设定交替
lineDashOffset设定开头的偏移

pen.clearRect(0, 0, 300, 300)
pen.lineWidth = 5
pen.setLineDash([5, 5])
pen.beginPath()
pen.moveTo(0, 150)
pen.lineTo(300, 150)
pen.stroke();

效果：

4，渐变

渐变的过程：
1，创建对象
2，添加颜色
3，赋值给fillStyle

对象有两种，矩形区域，圆形区域。
createLinearGradient(x1, y1, x2, y2)
矩形的对角
createRadialGradient(x1, y1, r1, x2, y2, r2)
两个圆

添加颜色：
addColorStop(position, color)
位置不大于一，是颜色所在的地方。

由黑到白的圆：

let change=pen.createRadialGradient(150, 150, 0, 150, 150, 150)
change.addColorStop(0,"white")
change.addColorStop(1,"black")

pen.fillStyle=change
pen.fillRect(0,0,300,300)

效果：

5，图案

就是用图片当样式，跟背景色有点像
createPattern(image, type)

显示一个图片：

let img = new Image();
img.src = 'a.jpg';
img.onload = function () {
    
    
	pen.fillStyle = pen.createPattern(img, 'no-repeat');
	pen.fillRect(0, 0, 300, 300);
}

效果：

6，阴影

shadowColor：颜色
shadowBlur：模糊
shadowOffsetX：偏移X
shadowOffsetY：偏移Y

pen.fillStyle = "black";
pen.fillRect(0, 0, 50, 50);
pen.shadowColor = "black"
pen.shadowOffsetX = 50
pen.shadowOffsetY = 50

效果：

7，填充规则

图形学的知识。。。

fill的时候可以指定一个参数
evenodd：奇数偶数填充。
nonzero：玄学。

pen.beginPath()
pen.arc(150, 150, 150, 0, 2 * Math.PI)
pen.arc(150, 150, 125, 0, 2 * Math.PI)
pen.arc(150, 150, 100, 0, 2 * Math.PI)
pen.arc(150, 150, 75, 0, 2 * Math.PI)
pen.arc(150, 150, 50, 0, 2 * Math.PI)
pen.arc(150, 150, 25, 0, 2 * Math.PI)
pen.fill("evenodd")

效果：