参考其他demo : http://www.html5tricks.com/html5-canvas-choujiang.html ...

提示，以下是实现思路，文章未尾有完整项目仓库。 下面简单介绍了HTML5 Canvas的来历、浏览器兼容性，主要内容是如何实现转盘抽奖，最后的DEMO非常简陋，真实场景还会有很多需要考虑和改进的地方(比如：浏览器前缀)，这里只讲一步步实现的思路。 Demo 在线演示 HTML5 ...

一．SVG(Scalable Vector Graphics,可伸缩矢量图形)和Canvas对比 1.Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG那样可以被放大缩小。 2.用Canvas绘制出的对象不属于页面DOM结构或者任何命名空间——这点被认为是 ...

先上代码： - Rectangles 绘制矩形对象 - context.fillRect(x,y,w,h) // 绘制矩形 - context.strokeRect(x ...

Canvas所支持的Image API是非常强大的;我们可以直接加载图像，将其显示在Canvas上,也可以切割和拼接显示所需的任何图像部分; 此外，Canvas给我们提供的存储其像素数据的功能，我们可以通过操纵像素数据，然后重新绘制到Canvas上。 虽然Canvas只有提供少数的Image ...

canvas loading... 渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。使用渐变需要三个步骤： (1) 创建渐变对象； (2) 为渐变对象设置颜色，指明过渡方式； (3) 在context上为填充样式或者描边样式设置渐变。 可以将渐变看做 ...

HTML5 canvas的事件 <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.strokeStyle ...

先从简单的开始 fillRect(x,y,width,height) 在坐标x,y的位置加上一个宽，高 如： fillRect(0,0,500,500)//在坐标0，0处 ...