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();


结果如图:

Html5 Cavans 整理笔记之填充样式_第1张图片

径向渐变

第一步: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();

结果如图:

Html5 Cavans 整理笔记之填充样式_第2张图片

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 可选。要使用的图像的高度。(伸展或缩小图像)

第二种和第二种的比较:

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

你可能感兴趣的:(html5,cavans)