学了一段时间的Html5 Canvas,现想一段一段的将学习笔记整理出来放上来,先整理一段Canvas的模版文件代码,以后建立Canvas程序就不用重新写这些代码了,当然最好是将这个Html代码保存到开发环境模板里,这样以后操作简便很多.使用模版时,只需要修改函数drawScreen()的代码即可,后续我的笔记也只在写出此函数的代码. 注:模版中需要说明一点的是,特别注意Canvas元素的高宽是通过自身的Width.Height属性来指定,切忌通过Css来控制Canvas其高宽,由此可能导致最终…

Canvas 基础笔记 初次认识 Canvas Canvas 线性图形(一):路径 Canvas 线性图形(二):圆形 Canvas 线性图形(三):曲线 Canvas 线性图形(四):矩形 Canvas 线性图形(五):多边形 Canvas 非线性图形(一):文本 Canvas 进阶笔记 Canvas 非常重要的三个函数…

组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”. source-over 这是默认设置,新图形会覆盖在原有内容之上. destination-over 会在原有内容之下绘制新图形. source-in 新图形会仅仅出现与原有内容重叠的部分.其它区域都变成透明的. destina…

绘制复杂图形必不可少的方法 save() 保存 canvas 状态 restore() 恢复 canvas 状态 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照. Canvas 的状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来. 实例: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,…

绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的. 实例: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif&quo…

色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = transparency value // globalAlpha 示例 ctx.fillStyle = '#FD0'; ctx.globalAlpha = 0.2; // rgba() 示例 ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fill…

<canvas> 元素 <canvas id="tutorial" width="150" height="150"></canvas> 1．<canvas> 标签只有两个属性—— width和height,默认宽度为300像素和高度为150像素． 2. </canvas> 标签不可省． 渲染上下文(The rendering context) var canvas = document…

1.从线条开始 HTML <canvas id="canvas"></canvas> Javascript var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d")       canvas.width canvas.height canvas.getContext("3d")     moveTo…

p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red;…

用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少,可以完成绘制矩形Rect.弧形Arc,也可以画贝塞尔曲线bezierCurver.quadraticCurve.下面我们一个一个的来说. 画线-Line function drawScreen(){ context.strokeStyle='black'; context.lineWidth=10;…