Canvas
关注
分享
扫一扫
文章平均质量分 73
ssbunny
这个作者很懒，什么都没留下…
展开
-
Canvas教程：基本用法
原文地址( https://developer.mozilla.org/En/Canvas_tutorial ) <canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。 <canvas>最先在苹果公司(Apple)的Mac O...原创 2011-08-08 16:02:36 · 175 阅读 · 0 评论 -
Canvas入门实例09：合成
主要合成属性有两个 context.globalAlpha = 0.5指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0 context.globalCompositeOperation = 'source-over'绘制到画布上的颜色是如何与画布上已有的颜色组合的，默认值是 "source-over"。其它可...原创 2011-12-20 17:12:56 · 110 阅读 · 0 评论 -
Canvas入门实例08：三次方贝塞尔曲线
本文示例三次方贝塞尔曲线的画法。方法如下：context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)其中， cp1x 控制点1的横坐标 cp1y 控制点1的纵坐标 cp2x 控制点2的横坐标 cp2y 控制点2的纵坐标 x 终止点横坐标 y 终止点纵坐标参考上一篇二次方...原创 2011-12-14 09:50:23 · 309 阅读 · 0 评论 -
Canvas入门实例07：二次方贝塞尔曲线
本文示例canvas二次方贝塞尔曲线的画法。 canvas画二次方贝塞尔曲线的方法如下：context.quadraticCurveTo(cpx, cpy, x, y)其中， cpx 控制点横坐标 cpy 控制点纵坐标 x 终止点横坐标 y 终止点纵坐标这样说太抽象，还是来看一下二次方贝塞尔曲线的公式：公式中可以看出，影响二次方贝塞尔曲线...原创 2011-12-14 09:12:22 · 671 阅读 · 0 评论 -
Canvas入门实例06：context.arcTo()的用法
该方法的使用方式如下：context.arcTo(x1, y1, x2, y2, radius)其中， x1 贯穿当前路径所在坐标的第一条切线的横坐标 y1 贯穿当前路径所在坐标的第一条切线的纵坐标 x2 贯穿(x1,y1)坐标的第二条切线的横坐标 y2 贯穿(x1,y1)坐标的第二条切线的横坐标 radius 弧半径 这也是一个画弧的方法。它...原创 2011-12-13 14:37:26 · 654 阅读 · 0 评论 -
Canvas入门实例05：画一个衣架
本文综合前面的几个例子，画一个晾衣架。function drawScreen(){ var context = theCanvas.getContext('2d'); context.strokeStyle = 'black'; context.lineWidth = 5; context.beginPath(); ...原创 2011-12-13 11:28:43 · 202 阅读 · 0 评论 -
Canvas入门实例04：画一个笑脸
本文通过画一个笑脸示例canvas弧线的用法Canvas画弧线的基本方法如下： context.arc(x, y, radius, startAngle, endAngle, anticlockwise) 其中： x 代表圆心横坐标 y 代表圆心纵坐标 radius 代表弧半径 startAngle 代表起始弧度 endAngle 代表结束弧度...原创 2011-12-12 17:13:14 · 801 阅读 · 0 评论 -
Canvas入门实例03：Path的连接点
本文示例path联线之间的拐点样式。 function drawScreen(){ var context = theCanvas.getContext('2d'); context.strokeStyle = '#000000'; context.lineWidth = 20; context.lineJoin = 'miter'; contex...原创 2011-12-12 16:07:02 · 126 阅读 · 0 评论 -
Canvas入门实例02：简单的直线
本文示例canvas最基本的path操作：画一条直线。function drawScreen(){ var context = theCanvas.getContext('2d'); context.strokeStyle = '#000000'; context.lineWidth = 10; context.lineCap = 'square'; ...原创 2011-12-12 15:46:42 · 90 阅读 · 0 评论 -
Canvas教程：绘制图形
网格 在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方...原创 2011-08-09 14:16:20 · 154 阅读 · 0 评论 -
Canvas入门实例01：猜字母
本文通过一个猜字母游戏示例canvas的基本用法结构 <!doctype html><html lang="zh"> <head> <meta charset="GBK"> <title>HTML5-猜字母</title> </head原创 2011-12-11 14:22:19 · 118 阅读 · 0 评论