【怎样建设个人网站】
grd.addColorStop(0,"#00 ff00”); //渐变起点
grd.addColorStop(l,"#OOOOff’); //渐变结束点
cxt.fillStyle=grd;
cxt.filIRect(10,0,180,30);
var radgrad=cxt.createRadialGradient(100,7 0,1,1 00,70,3 0)
radgrad.addColorStop(O," #OOffD 0 ");
radgrad.addColorStop(0.9,"#OOOOff ');
radgrad.addC olorStop( l,"#fffffF');
cxt.fillStyle=radgrad;
cxt.fillRect(70,40,60,60);
</script>
</body>
</html>
6.绘制图像
//绘制径向渐变
//渐变起点
//渐变偏移量
//渐变结束点
canvas相当有趣的一项功能就是可以引入图像,它可用于图片合成或者制作背景等。只要是Gecko排版引擎支持的图像(如PNG、GIF、JPEG等),都可以引入到canvas中,并且其他的canvas元素也可以作为图像的来源。
用户可以使用drawImage()方法在一个画布上绘制图像,也可以将源图像的任意矩形区域缩放或绘制到画布上,其有三种语法格式。
格式1:
drawlmage(image, x, y)
·85·
格式2: I
drawlmage(image,x,y'width, height) j
格式3: {
drawlmage(image,sourceX,sourceY'sourceWidth'sourceHeight'destX'destY'destWidth'destHeight)8
格式1把整个图像复制到画布上,并将其放置到指定点的左上角,然后将每个图像像素映射成画布坐标系统的一个单元;格式2也把整个图像复制到画布上,但是允许用户用画布单位来指定想要的图像的宽度和高度;格式3则是完全通用的,它允许用户指定图像的任何矩形区域并复制它,对画布中的任何位置都可进行任意缩放。