Html5 Cavans 整理笔记之填充样式

1.颜色填充样式

fillStyle

线性渐变

第一步：var grd=context.createLinearGradient(xstar,ystar,xend,yend);

第二步： grd.addColorStop(stop,color); //stop的值为【0，1】把整个画布视作整体1；填充色渐变为下一次填充色的范围是从这一次stop到下一次stop。

代码示例如下：

con.rect(0,0,can.width,can.height);var    grd=con.createLinearGradient(0,0,800,0);//渐变方向和尺度
grd.addColorStop(0,"green");//渐变颜色
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"black");
con.fillStyle=grd;
con.fill();

结果如图：

径向渐变

第一步：var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1)；
//x0,y0为开始径向渐变的位置，r0为第一种填充色保持的半径，r1-r0为渐变的范围（此时它为stop的“1”）

第二步： grd.addColorStop(stop,color); //stop的值为【0，1】把整个画布视作整体1；填充色渐变为下一次填充色的范围是从这一次stop到下一次stop。

代码示例如下：
重点内容

con.rect(0,0,can.width,can.height);  
var grd=con.createRadialGradient(can.height/2,can.height,0,can.height/2,can.height,can.height);
grd.addColorStop(0,"green");//渐变颜色
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"black");
con.fillStyle=grd;
con.fill();

结果如图：

2.图片填充样式

用图片填充图形有两种方法：第一种是类似颜色填充，把图片当颜色，直接fill。第二种是用图形clip()图片来实现的。

温馨提醒：

在cavans中导入图片要放在image.onload = function(){}中，不然显示不了。还有一种图片显示不出来是图片路径错了。

第一种：

演示代码如下：

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        var img = new Image();
        img.src = "imgs/马.jpg";
        img.width=200;
        img.height=200;
        img.onload = function(){
            var pattern = context.createPattern(img, "repeat");
            context.fillStyle = pattern;
            context.fillRect(0,0,300,300);
        }

    }
</script>

结果如下图：

有没有感觉别扭？是的这种方法没法保证填充的那个位置，只是单纯的填充，要图形够大才能让图片显示完全，但是它也有它的优点，你们可以自己想下。

第二种：

演示代码如下：

<script>
            var can=document.getElementById("cavans");
            var con=can.getContext("2d");
            can.width=800;
            can.height=800;
            var image=new Image();
            image.src="imgs/雨后河塘.jpg";
            image.onload = function(){
            con.strokeStyle="yellow";
            con.arc(100,100,50,0,2*Math.PI);
            con.lineWidth=5;
            con.stroke();
            con.clip();
            con.drawImage(image,50,50);
            };

</script>

结果如下图：

除了可以规定图片的显示位置，还可以对图片进行剪切，这样就可以单独显示你想要的图片部分。

剪切图像，在画布上定位被剪切部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数描述：
Img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）height 可选。要使用的图像的高度。（伸展或缩小图像）

第二种和第二种的比较：

第二种比起第一种来优势明显，自己对图片定位可以剪辑，但是在部分显示原来的图片时第二种加载的没第一种快，第一种是把图片当作颜色，第二种剪辑是部分隐藏，具体使用自己判断。