这是我参与「第五届青训营 」伴学笔记创作活动的第 四 天
1. colors
- fillStyle = color
设置图形的填充颜色。
- strokeStyle = color
设置图形轮廓的颜色。
fillStyle = color
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
strokeStyle = color
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
2. 透明度rgba()
globalAlpha = transparencyValue 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0（完全透明）到 1.0（完全不透明），默认是 1.0。
但更实用的是：rgba()
// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
3. 线型
- lineWidth = value
设置线条宽度。
-
lineCap = type 设置线条末端样式。
-
lineJoin = type
设定线条与线条间接合处的样式。
- miterLimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
- getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组。
- setLineDash(segments)
设置当前虚线样式。
- lineDashOffset = value
设置虚线样式的起始偏移量。
lineWidth = value
设置线条宽度。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
}
最左边的线宽 1.0 单位。并且，最左边的线以及所有宽度为奇数的线并不能精确呈现，这就是因为路径的定位问题。
如图二，实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。如最左边宽 1.0 单位的线实际以一半的颜色渲染了宽度为 2.0 单位的线。
要解决这个问题，你必须对路径施以更加精确的控制。如图三绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。
lineCap = type
设置线条末端样式。
butt，round 和 square。默认是 butt。
lineJoin = type
设定线条与线条间接合处的样式。
round, bevel 和 miter。默认是 miter。
miterLimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到miterLimit 属性的制约。
斜接限定值默认为 10.0，这将会去除所有小于大约 11 度的斜接。
getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
设置虚线样式的起始偏移量。
用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset 属性设置起始偏移量。
例：蚂蚁线（会动的虚线框）的效果:
var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.setLineDash([4, 2]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10, 100, 100);
}
function march() {
offset++;
if (offset > 16) {
offset = 0;
}
draw();
setTimeout(march, 20);
}
march();
