Your browser sucks and does not support canvas

Control and description

L1: distance between Pattern and Barrier
L3: length of each Barrier
L4: distance between two eyes
R1: barrier block-pass ratio
CO: Composition Operation: source-over, source-in, source-atop, lighter, xor, destination-over, destination-in, destination-out, destination-atop, darker, copy



Move mouse: move point of view
Click: pause move. Click again to resume

Canvas Ref

cheatsheet, HTML5 def Tutorial document.getElementById('canvas').getContext('2d') fillStyle 赋值为字串 "orange"、"#FFA500"、"rgb(255,165,0)"、"rgba(255,165,0,1)" strokeStyle globalAlpha 赋值为 0.0 (全透明) 到 1.0 (不透明) lineWidth 默认1 lineCap 为 'butt'(无头,默认)、'round'(圆头)、'square'(方头) 之一 lineJoin 为 'round'(园转角)、'bevel'(棱转角)、'miter'(直转角,默认) 之一 miterLimit 当lineJoin='miter' fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) rect(x, y, width, height) beginPath() closePath() stroke() fill() moveTo(x, y) lineTo(x, y) arc(x, y, radius, startAngle, endAngle, anticlockwise) quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) createPattern(image,type) type取值为'repeat''、'repeat-x'、'repeat-y'或'no-repeat' createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color) shadowOffsetX shadowOffsetY shadowBlur 默认0 shadowColor save() restore() translate(x, y) rotate(angle) 顺时针 scale(x, y) transform(m11, m12, m21, m22, dx, dy) 矩阵 globalCompositeOperation 12个属性 clip() 动画