【HTML5绘画与动画】定义样式和颜色 1. 颜色 2. 不透明度 3. 实线 4. 虚线 5. 线性渐变 6. 径向渐变 7. 图案 8. 阴影 9. 填充规则

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

 

 目录：

1. 颜色 2. 不透明度 3. 实线 4. 虚线 5. 线性渐变 6. 径向渐变 7. 图案 8. 阴影 9. 填充规则

 

1. 颜色

① 使用嵌套 for 循环绘制方格阵列，每个方格填充不同色。通过渐变的频率，可以绘制出类似 Photoshop 调色板的效果。

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    for( var i=0; i<6; i++ ){
        for( var j=0; j<6; j++ ){
            //fillStyle 设置图形的填充颜色 
            ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)'; //这里只改变红色绿色通道的值,蓝色通道的值不变
            ctx.fillRect( j*25, i*25, 25, 25 );
        }
    }
}
</script>

 页面表现：

② 使用 strokeStyle 属性，用 arc（）画圆，绘制渐变圆圈。

 语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    for( var i=0; i<6; i++ ){
        for( var j=0; j<6; j++ ){
            //stokeStroke 设置图形轮廓的颜色 
            ctx.strokeStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)'; //这里只改变红色绿色通道的值,蓝色通道的值不变
            ctx.beginPath();
            ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
            ctx.stroke();
        }
    }
}
</script>

 页面表现：

 

2. 不透明度

① 使用四色格做背景，设置 globalAlpha 为0.2后，在上面画一系列半径递增的半透明圆，最终结果是一个径向渐变效果。原叠加得更多，原先所画的圆的透明度会更低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    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+10*i,0,Math.PI*2,true);
        ctx.fill();
    }
}
</script>

 页面表现：

② 用 rgba() 方法设置不透明度

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    //画背景
    ctx.fillStyle = 'rbg(225,221,0)'; //给图形上色
    ctx.fillRect(0,0,150,37.5);    //画矩形
    ctx.fillStyle = 'rbg(102,204,0)';
    ctx.fillRect(0,37.5,150,37.5);
    ctx.fillStyle = 'rbg(0,153,255)'; 
    ctx.fillRect(0,75,150,37.5);
    ctx.fillStyle = 'rbg(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+i*14, 5+j*37.5, 14, 27.5);
        }
    }
}
</script>

页面表现：

 

 

3. 实线

① 使用 for 循环绘制了12条线宽依次递增的线段

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    for( var i=0; i<12; i++ ){
        ctx.strokeStyle="red";
        ctx.lineWidth = 1 + i;      //使用lineWidth可以设置线条的粗细，取值必须为正数，默认为1.0
        ctx.beginPath();
        ctx.moveTo(5, 5+i*14);      
        ctx.lineTo(140, 5+i*14);    //lineTo(x,y)绘制直线，x、y分别为终点的横坐标、纵坐标
        ctx.stroke();               //描边路径。通过线条来绘制图形轮廓
    }
}
</script>

 页面表现：

 ② 绘制三条蓝色的直线段，并依次设置三种属性值 butt、round 跟 square ，两侧有两条红色的参考线，以方便观察

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    var lineCap = ['butt','round','square'];　　//butt、round、square的端点依次为平头、圆头、方头
    //绘制参考线
    ctx.strokeStyle = 'red';
    ctx.beginPath;
    ctx.moveTo(10,10);
    ctx.lineTo(10,150);
    ctx.moveTo(150,10);
    ctx.lineTo(150,150);
    ctx.stroke();
    //绘制直线段
    ctx.strokeStyle = 'blue';
    for( var i=0; i<lineCap.length; i++ ){
        ctx.lineWidth = 20; //设置线条的粗细
        ctx.lineCap = lineCap[i];　　
        ctx.beginPath();
        ctx.moveTo(10,30+i*50);
        ctx.lineTo(150,30+i*50);
        ctx.stroke();
    }
}
</script>

 页面表现：

 ③ 绘制三条蓝色的折现，并依次设置上述三种属性值，观察拐角处样式的区别。

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    var lineJoin = ['round','bevel','miter'];
    ctx.strokeStyle = 'blue';
    for( var i=0; i<lineJoin.length; i++ ){
        ctx.lineWidth = 25;
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(10+i*150,30);
        ctx.lineTo(100+i*150,30);
        ctx.lineTo(100+i*150,100);
        ctx.stroke();
    }
}
</script>

 页面表现：

 ④ 观察当角度和 miterLimit 属性值发生变化时斜面长度的变化。在运行代码之前，也可以将 miterLimit 属性值改为固定值，以观察不同的值产生的结果。

 miterLimit属性用于规定两条线段交点处的绘制方式，作用是为斜面的长度设置一个上限，默认为 10 ，即规定斜面的长度不能超过线条宽度的10倍。当斜面的长度达到线条宽度的10倍时，就会变成斜角。

语句：

<canvas id="canvas" width="300" height="400" style="border:solid 1px #999;"></canvas>
<script>
draw();
function draw(){
    //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
    var ctx = document.getElementById('canvas').getContext('2d');
    for( var i=1; i<10; i++ ){
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 10;
        ctx.lineJoin = 'miter';
        ctx.miterLimit = i*10;
        ctx.beginPath();
        ctx.moveTo(10, i*30);
        ctx.lineTo(100, i*30);
        ctx.lineTo(10, 33*i);
        ctx.stroke();
    }
}
</script>

 页面表现：

 

4. 虚线

① 绘制一个矩形虚线框，然后使用定时器设计每隔设计0.5秒重绘一次，重绘时改变 lineDashOffset 属性值，从而创建一个行军蚁的效果。

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
//使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;
function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.setLineDash([4,4]);     //setLineDash()方法接收一个数组来指定线段与间隙的交替 
    ctx.lineDashOffset = offset;   //lineDashOffset 属性设置起始偏移量 
    ctx.strokeRect(50,50,200,100);
}
function march(){
    offset++;
    if(offset>16){ 
        offset = 0;
    }
    draw();
    setTimeout(march, 100);
}
march();
</script>

页面表现：

 效果是虚线在动，像行军蚁一样。

 

5. 线性渐变

① 绘制线性渐变。添加8个色标，分别为红、橙、黄、路、青、蓝、紫、红。

用法：context . createLinearGradient(x0, y0,x1, y1)   ，参数说明：

x0: 渐变开始点的 x 坐标 　　　　y0: 渐变开始点的 y 坐标

x1: 渐变结束点的 x 坐标　　 　　y1: 渐变结束点的 y 坐标

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //创建渐变
        var lingrad = ctx.createLinearGradient(0, 0, 0, 200);   //用createLinearGradient()创建 canvasGradient 对象
        lingrad.addColorStop(0, '#ff0000'); //使用 addColorStop() 上色
        lingrad.addColorStop(1/7, '#ff9900');
        lingrad.addColorStop(2/7, '#ffff00');
        lingrad.addColorStop(3/7, '#00ff00');
        lingrad.addColorStop(4/7, '#00ffff');
        lingrad.addColorStop(5/7, '#0000ff');
        lingrad.addColorStop(6/7, '#ff00ff');
        lingrad.addColorStop(1, '#ff0000');
        ctx.fillStyle = lingrad;
        ctx.strokeStyle = lingrad;
        ctx.fillRect(0, 0, 300, 200);
    }
</script>

 页面表现：

 

6. 径向渐变

① 使用径向渐变在画布中央绘制一个圆球形状

用法：context . createRadialGradient(x0, y0, r0, x1, y1, r1)   ，参数说明：

x0: 渐变的开始的圆的 x 坐标 　　　　y0: 渐变的开始的圆的 y 坐标

r0: 开始圆的半径　　　　　　　　　　x1: 渐变的开始圆的 x 坐标

y1: 渐变的结束圆的 y 坐标　　　　　 r1: 结束圆的半径

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //创建渐变
        var radgrad = ctx.createRadialGradient(150,100,0,150,100,100);   //createRadialGradient() 创建canvasGradient对象
        radgrad.addColorStop(0,'#A7D30C');      //使用 addColorStop() 上色
        radgrad.addColorStop(0.9,'#019F62');
        radgrad.addColorStop(1,'rgba(1,159,98,0)');
        //填充渐变色
        ctx.fillStyle = radgrad;
        ctx.fillRect(0,0,300,200);
    }
</script>

页面表现：

 

7. 图案

用法：createPattern( image, "repeat|repeat-x|repeat-y|no-repeat" )，参数说明：

repeat : 在水平和垂直方向重复 　　repeat-x ： 只在水平方向重复

repeat-y ： 只在垂直方向重复 　　 no-repeat : 只显示一次，不重复

① 以一幅 png 格式的图像作为 image 对象创建图案，以平铺方式同时沿 x 轴和 y 轴方向平铺

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //创建用于图案的新 image 对象
        var img = new Image();
        img.src = 'aixin.png';
        img.onload = function(){
            //创建图案
            var ptrn = ctx.createPattern(img, 'repeat');    //使用 createPattern() 绘制图案效果
            ctx.fillStyle = ptrn;
            ctx.fillRect(0,0,600,600);
        }
    }
</script>

 页面表现：

 

下图为 aixin.png：

 

 

 8. 阴影

 ① 创建文字阴影效果

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //设置阴影
        ctx.shadowOffsetX = 4;      //shadowOffsetX ： 设置阴影在 x 轴的偏移距离
        ctx.shadowOffsetY = 4;      //shadowOffsetY : 设置阴影在 y 轴的偏移距离
        ctx.shadowBlur = 4;         //shadowBlur : 设置阴影的模糊级别
        ctx.shadowColor = "rgba(0,0,0,0.5)";    //shadowColor : 设置阴影颜色
        //绘制文本
        ctx.font = "60px Times New Roman";
        ctx.fillStyle = "Black";
        ctx.fillText("Canvas API",5,80);
    }
</script>

 页面表现：

 

 9. 填充规则

① 使用 enenodd 规则填充图形

语句：

<canvas id="canvas" width="300" height="250" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.beginPath();
        ctx.arc(50,50,30,0,Math.PI*2,true);        
        ctx.arc(50,50,15,0,Math.PI*2,true);  
        ctx.fill("evenodd");    //evenodd ：奇偶规则 nonzero : 非零环绕数规则，为默认值
    }
</script>

 页面表现：

 ② 使用 nonzero 规则填充图形

语句：

　　将上面的第 10 行改为 ctx.fill( "nonzero" );

页面表现：