[实验]在同一个 canvas 元素中绘制不同颜色的图形

实验背景：

在做一个 HTML 5 的一个游戏项目的时候，想在同一个 canvas 元素中绘制多个具有不同颜色的图画，但是由于当时对 HTML 5 canvas 元素不是很熟悉，结果总是所有图画都具有一样的颜色。去网上查找，也没有找到这个问题的答案，于是只能自己研究了。

 

实验说明：

该项目本是移动平台的跨平台项目，可以跑在WP7，WP8，Andriod，iOS，黑莓等平台，但由于 HTML 5 本身具有较好的跨平台性，所以在保证平台兼容性没有问题的

情况下，本次测试在PC上进行。

 

实验目的：

在同一个 canvas 元素中绘制多个不同颜色的图画

 

实验材料：

语言：HTML5，javascript

开发工具：VS 2012 

测试工具：IE 10

 

实验过程：

 

首先创建一个 HTML 5 的基本页面，并添加一个 canvas 元素，id 为 myCanvas，然后添加 JS 代码，绘制四个小圆圈

代码如下：