风格
填充
- context.fillStyle = 'red';
- context.fill();
勾勒
- context.strokeStyle = 'red';
- context.stroke();
线性渐变
- var grd = context.createLinearGradient(x1, y1, x2, y2);
- grd.addColorStop(0, 'red');
- grd.addColorStop(1, 'blue');
- context.fillStyle = grd;
- context.fill();
径向渐变
- var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
- grd.addColorStop(0, 'red');
- grd.addColorStop(1, 'blue');
- context.fillStyle = grd;
- context.fill();
图案
- var imageObj = new Image();
- imageObj.onload = function() {
- var pattern = context.createPattern(imageObj, 'repeat');
- context.fillStyle = pattern;
- context.fill();
- };
- imageObj.src = 'path/to/my/image.jpg';
交点
context.lineJoin = 'miter|round|bevel';
线头
context.lineCap = 'butt|round|square';
阴影
- context.shadowColor = 'black';
- context.shadowBlur = 20;
- context.shadowOffsetX = 10;
- context.shadowOffsetY = 10;
- Alpha (透明)
- context.globalAlpha = 0.5; // between 0 and 1
来源: https://www.webhek.com/post/html5-canvas-cheat-sheet.html