html图形组合代码,基于HTML5的绘图——图形组合与阴影

组合多个图形

组合多个图形是指可以将图形重叠绘制在另一个图形上面，但图形中能够被看到的部分完全取决于以哪种方式进行组合，在HTML5中直接修改上下文对象globalCompositeOperation属性值即可。它使用的语法如下所示：

context.globalCompositeOperation=type;以推行组合的方式有多种，直接将值指定到上述语法中的type位置即可。type的属性值有多个，其具体说明如下表所示：

属性值

说明

source-over

默认值，表示新图形会覆盖在原有图形之上

destination-over

会在原有图形之上绘制新图形

source-in

新图形仅仅出现在与原有图形相重叠的部分，其他区域都变成透明

destination-in

原有图形中与新图形重叠的部分会被保留，其他区域都会变成透明

source-out

只有新图形中与原有图形不重叠的部分会被绘制出来

destination-out

原有图形中与新图形不重叠的部分会被保留

source-atop

只绘制新图形中被原有图形重叠覆盖的部分与原有图形未被重叠覆盖的其他部分，新图形中其他部分变成透明

destination-atop

只绘制原有图形中被新图形重叠覆盖的部分和新图形的其他部分，原有图形中的其他部分变成透明，不绘制新图形中与原有图形重叠的部分

lighter

两图形重叠部分做加色处理

darker

两图形重叠部分做减色处理

xor

重叠的部分会变成透明的

copy

只有新图形会被保留，其他部分都被清除掉

下面通过一个案例实现组合多个图形的效果

本案例通过循环设置globalCompositeOperation属性的值实现组合图形的多个效果，具体步骤如下所示

(1)添加HTML元素，页面合适位置添加12个canvas元素，他们同来组合图形的多个效果

/*省略其他canvas*/

(2)页面加载时调用javascript脚本，具体函数代码如下所示

function GetContext(id){

var canvas = document.getElementById(id);

if(canvas && canvas.getContext){

var context = canvas.getContext("2d");

return context;

}

}

function Smail(){

var oprtns = new Array("source-atop","source-in","source-out",

"source-over","destination-atop","destination-in",

"destination-out","destination-over","lighter",

"copy","darker","xor");

for(var i=0;i<12;i++){

var context = GetContext("canvas"+(i+1));

context.fillStyle="blue";

context.fillRect(10,10,60,60);

context.globalCompositeOperation=oprtns[i];

context.beginPath();

context.fillStyle="red";

context.arc(60,60,30,0,Math.PI*2,false);

context.fill();

}

}

window.addEventListener("load",Smail,true);(3)运行结果去下图所示

为图形绘制阴影

使用canvas元素添加隐形效果时需要设置上下文对象的相关属性，这些属性的具体说明如下所示：

shadowOffsetX：阴影与图形的横向位移量

shadowOffsetY：阴影与图形的纵向位移量

shadowBlur：阴影的模糊范围，默认值为1.设定该值时必须设定比0大的数字，它的值在0~10之间，否则将会被忽略

shadowColor：阴影的颜色，默认值为全透明的黑色。它的值可以是标准的CSS颜色值

shadowOffsetX和shadowOffsetY用于设定阴影在x轴和y轴的延伸距离，他们是不受变换矩阵影响的，负值表示隐形会向上或向左延伸，正值则表示会向下或向右延伸，他们的默认值都是1

下面案例通过阴影的相关属性分别为图形和文字实现阴影效果，其具体步骤如下所示：

(1)添加新的HTML页面，在页面合适位置添加两个canvas元素，分别用于显示图形和文字效果，具体代码如下所示

(2)页面加载时调用javascript脚本

function GetContext(id){

var canvas = document.getElementById(id);

if(canvas && canvas.getContext){

var context = canvas.getContext("2d");

return context;

}

}

function PicShadow(){

var ctx = GetContext("myCanvas");

ctx.shadowOffsetX = 15;

ctx.shadowOffsetY = 15;

ctx.shadowBlur = 10;

ctx.shadowColor = "rgba(100,200,1000,0.5)";

ctx.fillStyle = "blue";

ctx.beginPath();

ctx.arc(150,100,80,0,Math.PI*2,true);

ctx.fill();

}

function ZiShadow(){

var ctx = GetContext("meCanvas");

ctx.shadowOffsetX = -5;

ctx.shadowOffsetY = -5;

ctx.shadowBlur = 1;

ctx.shadowColor = "rgba(255,125,255,0.5)";

ctx.strokeStyle = "blue";

ctx.font = "italic 25px sans-sarif";

ctx.strokeText("实现文字和图像阴影",30,100);

ctx.stroke();

}

window.addEventListener("load",PicShadow,true);

window.addEventListener("load",ZiShadow,true);

(3)最终结果如下所示