canVas画布

Canvas的基本

canvas是什么? canvas的基本使用方法

四角形

fillRect(x,y,w,h) strokeRect(x,y,w,h) clearRect(x,y,w,h)

直线、曲线、多角形、圆

beginPath() moveTo(x,y) closePath() lineTo(x,y) quadraticCurveTo() bezierCurveTo() arcTo() arc()绘制圆弧 rect(x,y,w,h) fill() stroke() clip() isPointInPath(x,y)

变形

scale(x,y) rotate(angle) translate(x,y) transform() setTransform()

颜色与背景

fillStyle填充样式 strokeStyle轮廓样式 addColorStop()追加颜色 createLinearGradient() createPattern()

直线的样式

lineWidth线宽 lineCap线端形状 lineJoin连接处形状 miterLimit斜角界限

阴影

shadowColor颜色 shadowOffsetX偏离 shadowOffsetY偏离 shadowBlur模糊程度

透明度、合成方法

globalAlpha透明度 globalCompositeOperation

文本文件

fillText()填充文字 strokeText()轮廓文字 font textAlign textBaseline measureText()

图像

drawImage(img,dx,dy) drawImage(img,dx,dy,dw,dh) drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)

图像的操作

createImageData(sw,sh) createImageData(imgData) getImageData() putImageData() imageData.width ImageData.height ImageData.data

保存绘画状态

save() restore()

Canvas的条件

返回Canvas元素

JavaScript对象

基础内容

基础

HTML DOM

DOM Document DOM Elements DOM Attributes DOM Events

浏览器BOM

Window Navigator Screen History Location

html对象

a abbr address area article aside audio b base bdo blockquote body br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1~h6 head hr html i iframe img input button input checkbox input color input date input datetime input datetime-local input email input file input hidden input image input month input number input password input radio input range input reset input search input submit input text input time input url input week ins kbd keygen label legend li link map mark menu meta meter nav object ol optgroup option output p param pre progress q s samp script scetion select small source span strong style

canvas的基础

四角形Simple shapes(rectangles)

直线、曲线、多角形、圆(路径绘制图像)Complex shapes(paths)

路径
直线(多角形)
贝塞尔曲线
圆与圆弧
四角形
路径的样式
剪切路径
确认路径

变形(Transformations)Complex shapes(paths)

颜色与背景(Transformations)Complex shapes(paths)

指定样式
渐变
背景图案

直线的样式Line styles

Shadows

透明度、合成方法Compositing

文本文件Text

描画文本文件
指定文本文件的属性
描画文本文件时的测量

图形Images

图形的操作Pixel manipulation

ImageData对象的操作
ImageData对象的属性

保存绘画状态The canvas state

Canvas的条件Conformance requirements