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")
效果: