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
  • コメントを残す

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