tips blog

【js】canvas

2011年5月18日

【サンプル】
$(function(){
var canvas=$(“#cv canvas”)[0];
if(!canvas||!canvas.getContext)return false;
var ctx=canvas.getContext(‘2d’);

ctx.strokeStyle=”#000000″;
ctx.lineWidth=1;
ctx.fillStyle=”#ff0000″;
ctx.moveTo(0.5,0.5);
ctx.lineTo(120.5,0.5);
ctx.lineTo(120.5,60.5);
ctx.lineTo(0.5,60.5);

ctx.fill();
 });

【メソッド】

  • toDataURL()
  • getContext()

    • 【2dコンテキストメソッド】
    パス

  • beginPath()
  • moveTo()
  • closePath()
  • lineTo()
  • quadraticCurveTo()
  • bezierCurveTo()
  • arcTo()
  • arc()
  • rect()
  • fill()
  • stroke()
  • clip()
  • isPointInPath()

    • 矩形

  • clearRect()
  • fillRect()
  • strokeRect()

    • 色スタイル

  • addColorStop()
  • createLinearGradient()
  • createRadialGradient()
  • createPattern()

    • canvas の状態

  • save()
  • restore()

    • 変形

  • scale()
  • rotate()
  • translate()
  • transform()
  • setTransform()

    • ピクセル操作

  • createImageData()
  • getImageData()
  • putImageData()

    • イメージ

  • drawImage()

    • テキスト

  • fillText()
  • strokeText()
  • measureText()

    • フォーカス・マネージメント

  • drawFocusRing()

    • 2dコンテキストのプロパティ
    色とスタイル

  • strokeStyle
  • fillStyle

    • 合成

  • globalAlpha
  • globalCompositeOperation

    • ライン・スタイル

  • lineWidth
  • lineCap
  • lineJoin
  • miterLimit

    • 影

  • shadowColor
  • shadowOffsetX
  • shadowOffsetY
  • shadowBlur

    • テキスト

  • font
  • textAlign
  • textBaseline

    • コメントを残す

    メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です