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

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

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;…

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

绘制文本 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…

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

HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用. 然而,这些标签的含义是不同的: <b> 与<i> 定义粗体或斜体文本.<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示. <…

一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各级标题等把内容区块自动创建出来: 3. 标题分级:隐式编排按以下规则自动生成内容区块, 1)若新出现的标题比上个标题级别低,生成下级内容块:2)若级别高或者相等,生成新的内容区块 注:尽量使用显示编排 4. 不同内容区块可以使用相同级别的标题,例如,父内容区块与子内容区块可以使用同级别标题h1:…