HTML5基本图形的图形组合

它只是一个绘图容器，除了id、类、样式等属性外，还有高度和宽度属性。主要有三个步骤来绘制：

1。获取与元素对应的DOM对象，这是一个画布对象；
2。getContext（）的画布上的对象的方法调用，并得到canvasrenderingcontext2d对象。
三.调用canvasrenderingcontext2d对象绘制。

组合图形：

公牛；globalAlpha：设置或返回的电流的透明或Alpha值

这种方法主要是设置图形的透明度，这里没有介绍。

公牛；globalcompositeoperation：设置或返回一个新的图像是如何吸引到一个现有的图像，它具有以下的属性值：
下面是一个小例子，可以通过点击改变组合效果：

xml代码将内容复制到剪贴板。

组合图形

#帆布{
边境：1px solid # 1c0efa；
显示块；
保证金：20px汽车；
}
#按钮{
宽度：1000px；
保证金：5px汽车；
清楚：两者；
}
#按钮{
字体大小：18px；
显示块；
浮点数：左；
左：20px保证金；
}

您的浏览器不支持画布。
源
源之上
源
源出
目的地
目的在
目的地
目的地了
打火机
复制
异或

在window.onload =函数（）{
绘制（源于）；

VAR按钮= document.getelementbyid（按钮）。GetElementsByTagName（）；
对于（var i = 0；i < buttons.length；i++）{
{我}按钮onclick =函数（）{。
画画（这篇课文）；
返回false；
}；
}
}；

函数绘制（compositestyle）{
VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（2D）；

context.clearrect（0, 0，canvas.width，帆布，高度）；

绘制标题
context.font =大胆40px宋体；
context.textalign =中心；
context.textbasedline =中间；
context.fillstyle =# 150e0e ；
context.filltext（globalcompositeoperation =+ compositestyle，画布宽度 / 2, 60）；

/ /画一个矩形
context.fillstyle =# f6082a ；
context.fillrect（300, 150, 500，500）；

绘制三角形
context.globalcompositeoperation = compositestyle；
context.fillstyle =# 1611f5 ；
Context.beginPath（）；
（700, 250）context.moveto；
Context.lineTo（1000750）；
（400, 750）context.lineto；
Context.closePath（）；
Context.fill（）；
}

读者可以点击标签来观察不同的组合。结果如下：

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。