1. canvas设置颜色
- fillStyle = color; //设置图形的填充颜色
- strokeStyle = color; //设置图形轮廓的颜色
- color可以是表示css颜色值的字符串,渐变对象或者图案对象,color默认为黑色
- globalAlpha = 透明度(0-1)//设置透明度,有效范围(0.0完全透明 - 1.0完全不透明, 默认是1.0)
2. canvas设置线条样式
- lineWidth。线宽,正值,默认为1.0.起始点和终点的连线为中心,上下各占线宽的一半
- lineCap = type; //设置线条样式
type的3个值:
- butt: 线段末端以方形结束
- round: 线段末端以圆形结束,但是增加了一个宽高(宽度 = 线段宽度,高度 = 0.5 * 线段宽度)
- square: 线段末端以方形结束,但是增加了一个宽高(宽度 = 线段宽度,高度 = 0.5 * 线段宽度)
- lineJoin = type; //同一个Path内,设置线条与线条接合处的样式(同一个path,故不存在线条宽度不同的情况)
type的3个值:
- round:填充一个额外的扇形。扇形的圆心为直线相接点,圆角半径为线段的宽度
- bevel:在相连部分的末端填充一个额外的三角形
- miter(默认):延伸相连部分的外边缘,使其相交于一点
- 虚线
- setLineDash([实线长度, 间隙长度]); //设置实线长度与间隙长度
- lineDashOffset; //该属性设置起始偏移量。
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1000" height="800" style="border: solid 1px #24d1ec"></canvas>
<script>
function draw() {
let canvas=document.getElementById('canvas');
let ctx = canvas.getContext('2d');
setColorExample(ctx);
setLineStyle(ctx);
}
function setColorExample(ctx) {
setFillStyle(ctx);
setStrokeStyle(ctx);
}
function setFillStyle(ctx) {
ctx.globalAlpha = 0.8;
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.fillStyle = `rgb(${Math.floor(42.5 * i)}, ${Math.floor(42.5 * j)}, 0)`;
ctx.fillRect(j * 50, i * 50, 50, 50);
}
}
}
function setStrokeStyle(ctx) {
let randomInt = () => {
return parseInt(Math.random() * 255 , 10);
};
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.strokeStyle = `rgb(${randomInt()}, ${randomInt()}, ${randomInt()})`;
ctx.strokeRect(j * 50 + 310, i * 50, 50, 50);
}
}
}
function setLineStyle(ctx) {
setLineWidth(ctx);
setLineCap(ctx);
setLineJoin(ctx);
setLineDash(ctx);
}
function setLineWidth(ctx) {
ctx.beginPath();
ctx.moveTo(10, 350);
ctx.lineTo(250, 350);
ctx.lineWidth = 50;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 350);
ctx.lineTo(250, 350);
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.stroke();
}
function setLineCap(ctx) {
ctx.beginPath();
ctx.moveTo(40, 450);
ctx.lineTo(40, 550);
ctx.lineWidth = 50;
ctx.lineCap = "butt";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(110, 450);
ctx.lineTo(110, 550);
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(180, 450);
ctx.lineTo(180, 550);
ctx.lineWidth = 50;
ctx.lineCap = "square";
ctx.stroke();
}
function setLineJoin(ctx) {
ctx.lineWidth = 30;
ctx.beginPath();
ctx.moveTo(350, 320);
ctx.lineTo(450, 420);
ctx.lineTo(550, 320);
ctx.lineTo(650, 420);
ctx.closePath();
ctx.lineJoin = 'round';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(350, 430);
ctx.lineTo(450, 530);
ctx.lineTo(550, 430);
ctx.lineTo(650, 530);
ctx.closePath();
ctx.lineJoin = 'bevel';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(350, 550);
ctx.lineTo(450, 650);
ctx.lineTo(550, 550);
ctx.lineTo(650, 650);
ctx.closePath();
ctx.lineJoin = 'miter';
ctx.stroke();
}
function setLineDash (ctx) {
ctx.setLineDash([20,5]);
ctx.lineDashOffset = 5;
ctx.lineWidth = 2;
ctx.strokeRect(620, 10, 200, 200);
console.log(ctx.getLineDash());
}
draw();
</script>
</body>
</html>