HTML5 Canvas组合图形

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

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权威指南读书笔记

1.datetime

日期和时间之间用T分隔,Z表示UTC标准时间,可使用+08:00等替代Z来表示对应的时区,pubdate属性通常代码文章的发布日期

<time datetime="2016-10-05T20:00Z" pubdate>2016年10月5日</time>

2.由于一些浏览器尚未提供对H5新增结构元素的支持,可添加

//追加block声明
article, aside, dialog, figure, footer, header, legend, nav, section, main
{
  display:block;
}

而IE8及之前的浏览器不支持以上这种CSS的声明,需增加

//在script标签中加入
document.createElement("article");
... ...
//控制对指定版本浏览器有效在script标签两边加上
<!--[if lte IE 8]><![endif]-->

3.表单

formaction, formmethod, formtarget来指定各表单元素对应的属性

autofocus

indeterminate: checkbox的input表单元素新增了一种indeterminate状态,要使用这一状态,需在该元素的下方写一段JS或jQuery代码来将元素的indeterminate值赋为真

var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;

JS属性valueAsNumber,如document.getElementById(‘…’).valueAsNumber

CSS3+HTML5实现活塞运动

Html5配合CSS3已经越来越强大,以下通过CSS3+HTML5来模拟活塞运动。

首先设置背景颜色,这里仅测试了IE,Firefox和Chrome较新的版本,使用webkit也是为了兼容Chrome考虑:

background: -webkit-linear-gradient(top, coral, tomato);
background: linear-gradient(to bottom, coral, tomato);

通过代码定义活塞上下移动以及臂手(连动杆)左右摆动的动画:

@-webkit-keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@-webkit-keyframes arm {
0% { -webkit-transform: rotate(0); }
25% { -webkit-transform: rotate(-18deg); }
50% { -webkit-transform: rotate(0); }
75% { -webkit-transform: rotate(18deg); }
100% { -webkit-transform: rotate(0); }
}
@keyframes arm {
0% { transform: rotate(0); }
25% { transform: rotate(-18deg); }
50% { transform: rotate(0); }
75% { transform: rotate(18deg); }
100% { transform: rotate(0); }
}

应用上下移动活塞的动画:

-webkit-animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;
animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;

应用臂手左右摆的动画:

-webkit-transform-origin: center 10px;
-webkit-animation: arm 1.2s linear infinite;
transform-origin: center 10px;
animation: arm 1.2s linear infinite;

通过animation-delay来使五个活塞之前产生部分延时。

HTML5绘制桌球

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


Your browser does not support the canvas element.


HTML5绘制奥运五环

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

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

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


Your browser does not support the canvas element.