コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 Canvasの基本描画サンプルコード集_html5チュートリアルスキル

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

WBOY
リリース： 2016-05-16 15:45:46
オリジナル
1641 人が閲覧しました

基本的な描画

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



var

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


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

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

canvas

=
ドキュメント.getElementById('canvas'); >
if (canvas.getContext) {
  1. context.beginPath(); context.moveTo(100,100); context.quadraticCurveTo(20,50,200,20); context.ストローク();
    2. ｝
    4. 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'); >
    2. if (canvas.getContext) {
    3. 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);
    7. * 画像描画オブジェクト
    8. ※dx dyキャンバスのコーディネート
    9. ※dw、dhは描画するキャンバス内の画像の位置を示します
    10. ※sw、shは描画する画像の領域を表します
    11. * sx,sy 描画する描画の開始位置
    12. */
    13. var
  13. 画像
    14. =
  14. ドキュメント.getElementById('img'); context.drawImage(image, 0, 0); var
    15. img
  15. =
    16. 新しい
  16. Image(); img.src = 'images/1.jpg'
    17. ;
  17. img.onload = 関数(){
  18. // 画像を描画 // 0,0 座標から描画を開始します
    19. // context.drawImage(img,0,0);
    20. // 0, 0 から始めて、全体を縦横 100,100 まで描画します
    21. // context.drawImage(img, 0, 0, 100, 100);
  21. // スクリーンショット、50,50 から 100,100。260,130 から描画を開始し、長さと幅 100,100 の領域に配置します。
    22. // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
    23. // getImageData と putImageData を使用して画像を描画します
    25. context.drawImage(img, 10, 10);
    26. // アートボードからピクセルデータを取得します
    27. // 開始位置、終了位置
    28. var
  28. imgData
    29. =
  29. context
    30. .getImageData(50,50,100,100);
  30. // 描画ボード上の指定された位置座標にデータを描画します
  31. context.putImageData(imgData,10,260);
  32. // ピクセルデータの一部を描画ボードに描画
  33. context.putImageData(imgData,200,260,50,50,100,100);
    35. // createImageData ピクセルを作成します
    36. var
  36. imgData = context.getImageData(50,50,200,200); // 指定されたサイズの空のオブジェクトを作成します
  37. var
    38. imgData01
  38. = コンテキスト.createImageData(imgData); for (
    39. i
  39. =
    40. 0
  40. ; i < imgData01.width * imgData01.height * 4; i =4) { // 赤いピクセル imgData01.data[i 0] = 255;
    41. imgData01.data[i 1] = 0;
  41. imgData01.data[i 2] = 0;
    42. imgData01.data[i 3] = 255;
  43. context.putImageData(imgData01, 10, 260);
  44. }
  45. }
関連ラベル：
canvas html5 描画
ソース：php.cn
前の記事：HTML5 ローカル ストレージ テクノロジについて話す_html5 チュートリアルのスキル 次の記事：HTML5_html5 チュートリアルのスキルに基づいたオンラインビデオ再生ソリューションに関する簡単な説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート