亚洲精品中文字幕无乱码_久久亚洲精品无码AV大片_最新国产免费Av网址_国产精品3级片

網頁設計

html5使用canvas畫三角形

時間:2024-09-21 05:31:05 網頁設計 我要投稿
  • 相關推薦

html5使用canvas畫三角形

  html5如何使用canvas畫三角形,就跟隨百分網小編一起去了解下吧,想了解更多相關信息請持續(xù)關注我們應屆畢業(yè)生考試網!

  <canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>

  代碼如下:

  var canvas=document.getElementById("canvas");

  var cxt=canvas.getContext("2d");

  cxt.beginPath();

  cxt.moveTo(250,50);

  cxt.lineTo(200,200);

  cxt.lineTo(300,300);

  cxt.closePath();//填充或閉合 需要先閉合路徑才能畫

  //空心三角形

  cxt.strokeStyle="red";

  cxt.stroke();

  //實心三角形

  cxt.beginPath();

  cxt.moveTo(350,50);

  cxt.lineTo(300,200);

  cxt.lineTo(400,300);

  cxt.closePath();

  cxt.fill();

  <canvas id="canvas" width="500" height="400" style="background-color: yellow;"></canvas>

  代碼如下:

  var canvas=document.getElementById("canvas");

  var cxt=canvas.getContext("2d");

  cxt.font="40px 黑體";

  //繪制實心字

  cxt.fillStyle="red";//填充紅色

  cxt.fillText("hello,思思博士",10,50);

  //繪制空心字

  cxt.strokeStyle="red";//紅色邊

  cxt.strokeText("hello,思思博士",10,100);

【html5使用canvas畫三角形】相關文章:

html5的canvas方法使用03-02

HTML5新特性介紹11-17

用canvas就可以實現圖片的濾鏡轉化代碼實現03-24

HTML5字體設置的方法03-29

《流動的畫》說課稿09-05

畫教學設計02-26

Dreamweaver的使用優(yōu)點05-16

PowerPoint使用技巧11-29

使用NPM的技巧11-28