canvas的绘制学习-2

色彩 Colors
fillStyle = color //设置图形的填充颜色。
strokeStyle = color //设置图形轮廓的颜色。
示例-1
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.5i) + ‘,’ +
Math.floor(255-42.5j) + ‘,0)’;
ctx.fillRect(j25,i25,25,25);
}
}
}

示例-2
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.5i) + ‘,’ +
Math.floor(255-42.5j) + ‘)’;
ctx.beginPath();
ctx.arc(12.5+j25,12.5+i25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
globalAlpha = transparencyValue //这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = “rgba(255,0,0,0.5)”;
ctx.fillStyle = “rgba(255,0,0,0.5)”; 这样也能达到透明的效果
globalAlpha 示例
function draw() {
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
// 画背景
ctx.fillStyle = ‘#FD0’;
ctx.fillRect(0,0,75,75);
ctx.fillStyle = ‘#6C0’;
ctx.fillRect(75,0,75,75);
ctx.fillStyle = ‘#09F’;
ctx.fillRect(0,75,75,75);
ctx.fillStyle = ‘#F30’;
ctx.fillRect(75,75,75,75);
ctx.fillStyle = ‘#FFF’;

// 设置透明度值
ctx.globalAlpha = 0.2;

// 画半透明圆
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10i,0,Math.PI2,true);
ctx.fill();
}
}
rgba() 示例
function draw() {
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);

// 画背景
ctx.fillStyle = ‘rgb(255,221,0)’;
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = ‘rgb(102,204,0)’;
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = ‘rgb(0,153,255)’;
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = ‘rgb(255,51,0)’;
ctx.fillRect(0,112.5,150,37.5);

// 画半透明矩形
for (var i=0;i<10;i++){
ctx.fillStyle = ‘rgba(255,255,255,’+(i+1)/10+’)’;
for (var j=0;j<4;j++){
ctx.fillRect(5+i14,5+j37.5,14,27.5)
}
}
}
线型 Line styles
lineWidth = value //设置线条宽度
lineCap = type //设置线段端点显示的样子样式 [‘butt’,‘round’,‘square’]
lineJoin = type //图形中两线段连接处所显示的样子 [‘round’, ‘bevel’, ‘miter’]
miterLimit = value //限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
getLineDash() //返回一个包含当前虚线样式，长度为非负偶数的数组
setLineDash(segments) //设置当前虚线样式。
lineDashOffset = value //设置虚线样式的起始偏移量