http://zhidian.wuute.com/html5dev/ 2026-04-08T13:28:35+09:00 http://zhidian.wuute.com/html5dev/ http://zhidian.wuute.com/html5dev/lib/tpl/bootstrap3_1/images/favicon.ico text/html 2017-04-23T16:51:30+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/06?rev=1492933890&do=diff 示例基础代码 用canvas画一个9*9的表格 (function(global) { 'use strict'; function _extend(obj1, obj2) { for (var i in obj2) { if (obj2.hasOwnProperty(i)) { obj1[i] = obj2[i]; } } } function GridFunny(options) { this.grid = {}; this.gridOfX = {}; this.gridOfY = {}; this.settings = { container: document.body, gridColor: "#ccc", // 格子的颜色 gridNum: 9, // 格子的数量 … text/html 2017-04-19T00:34:26+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/16?rev=1492529666&do=diff 绘制形状 概述 Canvas API中提供处理形状的简单方法有： * fillRect：它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高，在绘制矩形前可以使用fillStyle属性设置矩形的填充色 text/html 2017-04-19T00:34:47+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/26?rev=1492529687&do=diff 绘制图片 概述 drawImage方法将所给图片绘制到canvas。 使用方法 CanvasRenderingContext2D .drawImage(image, dx, dy)； CanvasRenderingContext2D .drawImage(image, dx, dy, dw, dh)； CanvasRenderingContext2D .drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)； text/html 2017-04-19T00:35:01+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/36?rev=1492529701&do=diff 绘制文本 概述 Canvas API中提供了两种绘制文本的方法： * fillText：绘制文本 CanvasRenderingContext2D.fillText(text, x, y); CanvasRenderingContext2D.fillText(text, x, y, maxWidth); * strokeText：添加空心字 text/html 2017-04-23T16:41:13+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/46?rev=1492933273&do=diff 绘制阴影 概述 Canvas API中提供了一系列与阴影相关的属性来设置阴影。 * shadowOffsetX：设置水平方向的阴影，默认值是0 CanvasRenderingContext2D.shadowOffsetX * shadowOffsetY：设置垂直方向的阴影，默认值是0 text/html 2017-04-19T00:32:48+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/56?rev=1492529568&do=diff 绘制渐变 概述 Canvas API中提供设置渐变色的方法有： * createLinearGradient：线性渐变 * createRadialGradient：径向渐变 代码示例 线性渐变 CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1); CanvasGradient.addColorStop(position, color); text/html 2017-04-23T16:42:27+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/66?rev=1492933347&do=diff 变形处理 概述 Canvas API中提供的变形方法主要有： * scale：缩放 CanvasRenderingContext2D.scale(x, y) * rotate：旋转 CanvasRenderingContext2D.rotate(angle) * translate：重新映射画布上的 (0,0) 位置 CanvasRenderingContext2D.translate(x, y) text/html 2017-04-19T00:35:49+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/76?rev=1492529749&do=diff 创建动画 概述 配合使用JavaScript中提供的requestAnimationFrame方法，可以很容易的在canvas中实现动画效果 一般来说，需要按照下面的步骤来创建动画： 1. 清空canvas：使用clearRect方法，清空区域。 2. 保存canvas状态：如果你要改变一些会改变canvas状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。 3. 绘制动画图形（animated shapes） 4. 恢复canvas状态… text/html 2017-04-23T16:50:58+09:00 http://zhidian.wuute.com/html5dev/doku.php/36/26/canvas/start?rev=1492933858&do=diff Canvas 定义 Canvas是一个原生HTML画板。 概述 Canvas提供了基于位图的一系列的图形API，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。 本目录的文档系列相关示例代码可以点击canvas index