HTML5 学习手笔二：canvas API 绘制树形图案A
上篇通过对canvas 画对角线，了解了一些canvas画图基本原理。现在可以利用HTML5 canvas API创建一个场景：带有长跑跑道的树林。 本篇大纲 用canvas API绘制树木的树冠 为树冠的边框架加粗并且填充树冠颜色 为树冠创造一个强大的树干 ...
原文：HTML5 学习手笔三：canvas API 绘制树形图案B
继续为上篇的跑道树林添砖加瓦。 本篇大纲 加载图像做为树干的背景 为树干实现渐变效果 使用背景图让跑道更加真实 :使用HTML 的scale功能缩放树木 。 :使用rotate制造倾倒树木的效果 为树木添加阳光照射下的阴影效果 添加文本标题，并为文本增加阴影效果，使用Canvas Shadow API。 加载图像做为树干的背景，功能点为：在canvas 中插入图片 上篇使用矩形填充颜色的功能为树冠 ...
2012-02-27 16:26 6 5556 推荐指数：
相关推荐
HTML5 学习手笔四：canvas 总结
什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 Canvas 对象 Canvas 对象表示一个 ...
HTML5学习总结——canvas绘制象棋(canvas绘图)
一、HTML5学习总结——canvas绘制象棋 1、第一次：canvas绘制象棋（笨方法）示例代码 View Code 运行结果： 小结： 刚刚学习了canvas,做了一个简单的示例，希望能巩固一下自己所学的知识，从上面的代码可以看出存在很多不 ...
HTML5(五)——Canvas API
什么是 Canvas API? Canvas API（画布）提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。可用于动画、游戏、图标、图片编辑等多个方面。 使用前，首先需要新建在网页上新建 canvas 元素。 < ...
HTML5 Canvas 绘制斜线
<!DOCTYPE HTML> <html> <title>Canvas直线</title> <body> <canvas id="myCanvas" width="200" height="200" style ...
HTML5 Canvas 绘制时钟
demo演示： 用到的一些绘制方法说明： context.translate(x,y)方法，重新设置画布的坐标源点，设置后，x,y坐标处为变为起始坐标(0,0); context.arc(圆心x坐标, 圆心Y坐标, 圆半径, 起始弧度,结束点弧度, 是否顺时针) 方法绘制圆形，或者圆弧 ...
html5 canvas之绘制曲线
html5 canvas 提供了绘制一系列曲线的函数。如下： 1、如果我们需绘制更加复杂的曲线路径，我们或许该用到贝塞尔或者2次方程曲线。 quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y ...