Canvas | 记录点滴生活 | Alan Hou的个人博客

HTML5 Canvas组合图形

Posted on October 10, 2016by Alan

在学习Canvas组合图形时看描述有些云里雾里，于是记录下实际效果来方便查看：

#canvas示例代码

<canvas id="canvas" width="400" height="300"></canvas>

#js示例代码

function draw(id){
  var canvas = document.getElementById(id);
  if(canvas == null)
    return false;
  var context = canvas.getContext('2d');
  var oprtns = new Array(
    "source-atop",
    "source-in",
    "source-out",
    "source-over",
    "destination-atop",
    "destination-in",
    "destination-out",
    "destination-over",
    "lighter",
    "copy",
    "xor"
  );
  i = 8;
  context.fillStyle = "blue";
  context.fillRect(10,10,60,60);
  context.globalCompositeOperation = oprtns[0];#替换此处数字来查看效果
  context.beginPath();
  context.fillStyle = "red";
  context.arc(60,60,30,0,Math.PI*2,false);
  context.fill();
}

HTML5&CSS3

HTML5绘制桌球

Posted on May 25, 2014by Alan

桌球（又称台球，撞球）源自英国，是一项在国际上广泛流行的高雅的室内体育运动，是一种用球杆在台上击球，依靠计算得分确定比赛胜负的室内娱乐体育项目。
下图为通过HTML5的Canvas配合JS生成的仿桌球图片，右侧的小球采用随机函数显示不同颜色，每次刷新后将显示不同的组合颜色。

HTML5&CSS3

HTML5绘制奥运五环

Posted on May 25, 2014by Alan

奥运五环是奥运会的标志，由Pierre de Coubertin顾拜旦先生于1913年所构思设计的，下面通过HTML5的canvas加js来绘制五环标志。部分代码如下：
创建Canvas:

     &lt;canvas id="#" width="#" height="#" style="border: 1px solid #c3c3c3;"&gt;&lt;/canvas&gt;

1	<canvas id="#" width="#" height="#" style="border: 1px solid #c3c3c3;"></canvas>

通过javascript设置画布环境并绘制圆形：

        var c =document.getElementById("mycanvas");
        var ctx = c.getContext("2d");
	ctx.lineWidth=5;
	ctx.strokeStyle="#163B62";
	ctx.beginPath();
	ctx.arc(70,70,40,0,Math.PI*2,false); //context.arc(x,y,r,sAngle,eAngle,counterclockwise)
	ctx.stroke();

var c =document.getElementById("mycanvas");

var ctx = c.getContext("2d");

ctx.lineWidth=5;

ctx.strokeStyle="#163B62";

ctx.beginPath();

ctx.arc(70,70,40,0,Math.PI*2,false); //context.arc(x,y,r,sAngle,eAngle,counterclockwise)

ctx.stroke();

由于IE9以前的版本及其它浏览器早期的版本对canvas不支持，所以将无法正常显示，图形效果如下：