HTML5新特性与Canvas绘图技术详解.pdfVIP

复习:HTML5新特性:(1)新的语义和属性(2)表单2.0频和音频

src=autoyloopcontrolsmutedposterpreload=auto

audiosrc=(4)Canvas绘图——重点(5)SVG绘图(6)地理定位(7)拖放

API(8)WebWorker(9)WebStorage(10)WebSocket

JS绘图技术:

canvas宽度=600高度=400/canvas

varctx=c.getContext(2d);//常用属性

ctx.fillStyle=颜色/渐变对象ctx.strokeStyle=颜

色/渐变对象ctx.lineWidth=1ctx.font=10px

sans‑serifctx.textBaseline=基线

ctx.shadowColor=rgba(0,0,0,0)

ctx.shadowOffsetX=0ctx.shadowOffsetY=0

ctx.shadowBlur=0

//常用方法

(1)绘制矩形ctx.fillRect(x,

y,w,h)ctx.strokeRect(x,

y,w,h)ctx.clearRect(x,y,

w,h)(2)绘制文本

ctx.fillTex