HTML5 Canvasの基本描画サンプルコード集_html5チュートリアルスキル

基本的な描画

XML/HTML コードコンテンツをクリップボードにコピー

1. var canvas = ドキュメント.getElementById('canvas'); >
if (canvas.getContext) {
var
3. context = canvas.getContext('2d'); // 線幅
context.lineWidth
5. = 4; // ブラシカラー
6. context.bloodStyle
=
7. 'red'; // 塗りつぶしの色
context.fillStyle
8. =
"赤"
9. ; // ラインキャップの種類 context.lineCap
=
10. 'butt'
// 丸型、四角型
11. ; // 開始パス context.beginPath(); // 開始点
12. context.moveTo(10,10);
// 終点
context.lineTo(150,50);
// 描画
context.ストローク();
｝
長方形
20. XML/HTML コード
コンテンツをクリップボードにコピー

var

canvas

= ドキュメント.getElementById('canvas'); >

if (canvas.getContext) {
1. context.beginPath(); context.ストロークRect(10,10,70,40); // 長方形の別の方法
context.rect(10,10.70,40);
2. context.ストローク();
4. // 実線の長方形
5. context.beginPath();
context.fillRect(10,10,70,40);
6. // 別の方法の実線長方形
7. context.beginPath();
context.rect(10,10,70,40);
8. context.fill();
9. ｝
11. ラウンド
12. XML/HTML コード
13. コンテンツをクリップボードにコピー
    1. var canvas = ドキュメント.getElementById('canvas'); >
    if (canvas.getContext) {
    context.beginPath();
    3. // 円の中心座標 x、円の中心座標 Y、円弧の半径、開始角度、終了角度、反時計回りかどうか
    4. // 4 番目と 5 番目のパラメーターは渡されるラジアンです。角度 30 を描画する場合は、それをラジアン 30 * Math.PI / 180
    に変換する必要があります。
    5. context.arc(100,100,70,0,130 * Math.PI / 180, true);
    context.ストローク();
    context.fill();
    ｝
    角丸

XML/HTML コードコンテンツをクリップボードにコピー

var

canvas

1. = ドキュメント.getElementById('canvas'); > if (canvas.getContext) { context.beginPath();
context.moveTo(20,20);
context.lineTo(70,20);
// パスの円弧 p1.x p1.y p2.x、p2.y の円弧半径を描画します。
context.arcTo(120,30,120,70, 50);
5. context.lineTo(120,120);
6. context.ストローク();
8. // キャンバスのアートボードを消去
9. context.beginPath();
context.fillRect(10,10,200,100);
// 領域を消去
context.clearRect(30,30,50,50);
13. ｝
15. 二次ベジェ曲線
16. XML/HTML コード
コンテンツをクリップボードにコピー

var

canvas

=

ドキュメント.getElementById('canvas'); >

if (canvas.getContext) {

1. context.beginPath(); context.moveTo(100,100); context.quadraticCurveTo(20,50,200,20); context.ストローク();
｝
3 次ベジェ曲線
5. XML/HTML コード
コンテンツをクリップボードにコピー
6. 1. var canvas = document.getElementById('canvas');   
   2. if (canvas.getContext) {
   3. context.moveTo(68,130);   
   4. var cX1 = 20;   
   5. var cY1 = 10;   
   6. var cX2 = 268;   
   7. var cY2 = 10;   
   8. var endX = 268;   
   9. var endY = 170;   
   10. context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
   11. context.ストローク();   
   13. // クリップを利用して绘图領域を指定し、绘图領域を指定した後、ただ可能に绘图領域中行绘图擦欧总
   14. // 绘制圆形
   15. context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
   16. // 制限区域
   17. context.clip();   
   18. // 开始尝试绘制その他
   19. context.beginPath();   
   20. context.fillStyle = 'lightblue';   
   21. // 结果四角形并没有显示成果
   22. context.fillRect(0,0,300,150);   
   23. }

画板进阶使用

XML/HTML コード复制コンテンツ到剪贴板

1. var canvas = ドキュメント.getElementById('canvas'); >
if (canvas.getContext) {
var
3. context = canvas.getContext('2d'); /*
4. *drawImage(image,dx,dy)
5. *drawImage(image,dx,dy,dw,dh)
6. *drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
* 画像描画オブジェクト
※dx dyキャンバスのコーディネート
※dw、dhは描画するキャンバス内の画像の位置を示します
※sw、shは描画する画像の領域を表します
* sx,sy 描画する描画の開始位置
*/
var
13. 画像
=
14. ドキュメント.getElementById('img'); context.drawImage(image, 0, 0); var
img
15. =
新しい
16. Image(); img.src = 'images/1.jpg'
;
17. img.onload = 関数(){
18. // 画像を描画 // 0,0 座標から描画を開始します
// context.drawImage(img,0,0);
// 0, 0 から始めて、全体を縦横 100,100 まで描画します
// context.drawImage(img, 0, 0, 100, 100);
21. // スクリーンショット、50,50 から 100,100。260,130 から描画を開始し、長さと幅 100,100 の領域に配置します。
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
// getImageData と putImageData を使用して画像を描画します
context.drawImage(img, 10, 10);
// アートボードからピクセルデータを取得します
// 開始位置、終了位置
var
28. imgData
=
29. context
.getImageData(50,50,100,100);
30. // 描画ボード上の指定された位置座標にデータを描画します
31. context.putImageData(imgData,10,260);
32. // ピクセルデータの一部を描画ボードに描画
33. context.putImageData(imgData,200,260,50,50,100,100);
// createImageData ピクセルを作成します
var
36. imgData = context.getImageData(50,50,200,200); // 指定されたサイズの空のオブジェクトを作成します
37. var
imgData01
38. = コンテキスト.createImageData(imgData); for (
i
39. =
0
40. ; i < imgData01.width * imgData01.height * 4; i =4) { // 赤いピクセル imgData01.data[i 0] = 255;
imgData01.data[i 1] = 0;
41. imgData01.data[i 2] = 0;
imgData01.data[i 3] = 255;
43. context.putImageData(imgData01, 10, 260);
44. }
45. }