HTML 5のcanvasベース

前提条件

htmlにタグ

を書き込む.

は、においてタグを し、 を する.

var canvas=document.getElementById('canvas')  
var context=canvas.getContext('2d');

canvasは2つのステップに けることができます: と りつぶし. の 、 はfillRect()およびstrokeRect()の である. についてはstroke()およびfill()の である. 、 の の は、strokeStyleおよびfillStyleの およびclearRect()の である.clearRect()は4つのパラメータを け れることができる.
パスの
パスを するには、beginPath()メソッドを び す があります. しいパスの を することを します. するときはstroke()またはfill()メソッドを び し、 するときはstrokeStyleまたはfillStyle メソッドを び し、ペンを の で するときはmoveTo()メソッドを します. はlineTo() , はarc( x ， y ， ， ， ， )せん はclip() ,クリアはclearRect() である.
テキストの

context.font='bold 14px Arial'  
context.textAlign='center/start/end'  
context.textBaseline='middle/bottom/top'
context.fillText('12',100,20)
context.strokeText('12',100,30)

へんかん
translate(x,y)このメソッドを すると、 は(0,0)から された に されます.

context.shadowColor='rgba(0,0,0,0.5)'
context.shadowBlur=4;//   
context.shadowOffsetY=5;
context.shadowOffsetX=4;//      y       。   0

グラデーション

var gradient=context.createLinerGradient(30,30,70,80)//             

addColorStop()を する.をクリックしてスケールを します.この では、スケール とcss の2つのパラメータが されます.ここで、スケール は0( )と1( )の の です.

gradient.addColorStop(0,'white')
gradient.addColorStop(1,'blue')