HTML5 canvas基本绘图之图形组合

时间：2021-05-08

<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：

1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3.调用CanvasRenderingContext2D对象进行绘图。

图形组合：

•globalAlpha： 设置或返回绘图的当前 alpha 或透明值

该方法主要是设置图形的透明度，这里就不具体介绍。

•globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：

下面是一个小示例，可以通过点击改变组合效果：

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>图形组合</title>
  • <styletype="text/css">
  • #canvas{
  • border:1pxsolid#1C0EFA;
  • display:block;
  • margin:20pxauto;
  • }
  • #buttons{
  • width:1000px;
  • margin:5pxauto;
  • clear:both;
  • }
  • #buttonsa{
  • font-size:18px;
  • display:block;
  • float:left;
  • margin-left:20px;
  • }
  • </style>
  • </head>
  • <body>
  • <canvasid="canvas"width="1000"height="800">
  • 你的浏览器还不支持canvas
  • </canvas>
  • <divid="buttons">
  • <ahref="#">source-over</a>
  • <ahref="#">source-atop</a>
  • <ahref="#">source-in</a>
  • <ahref="#">source-out</a>
  • <ahref="#">destination-over</a>
  • <ahref="#">destination-atop</a>
  • <ahref="#">destination-in</a>
  • <ahref="#">destination-out</a>
  • <ahref="#">lighter</a>
  • <ahref="#">copy</a>
  • <ahref="#">xor</a>
  • </div>
  • </body>
  • <scripttype="text/javascript">
  • window.onload=function(){
  • draw("source-over");
  • varbuttons=document.getElementById("buttons").getElementsByTagName("a");
  • for(vari=0;i<buttons.length;i++){
  • buttons[i].onclick=function(){
  • draw(this.text);
  • returnfalse;
  • };
  • }
  • };
  • functiondraw(compositeStyle){
  • varcanvas=document.getElementById("canvas");
  • varcontext=canvas.getContext("2d");
  • context.clearRect(0,0,canvas.width,canvas.height);
  • //drawtitle
  • context.font="bold40pxArial";
  • context.textAlign="center";
  • context.textBasedline="middle";
  • context.fillStyle="#150E0E";
  • context.fillText("globalCompositeOperation="+compositeStyle,canvas.width/2,60);
  • //drawarect
  • context.fillStyle="#F6082A";
  • context.fillRect(300,150,500,500);
  • //drawatriangle
  • context.globalCompositeOperation=compositeStyle;
  • context.fillStyle="#1611F5";
  • context.beginPath();
  • context.moveTo(700,250);
  • context.lineTo(1000,750);
  • context.lineTo(400,750);
  • context.closePath();
  • context.fill();
  • }
  • </script>
  • </html>

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

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章