溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="can1" width="500px" height="400px" style="border:solid 1px red">
</canvas>
<script type="text/javascript">
//1.得到畫布
var canvas1 = document.getElementById_x("can1");
//2.得到畫筆
var cxt = canvas1.getContext("2d");
//3.畫直線
//moveTo函數就是設置點的位置
cxt.moveTo(20, 20);
//設置第二個點的位置
cxt.lineTo(20, 90);
//畫出直線
cxt.stroke();
//畫出一個填充三角形
//開始新的路徑
cxt.beginPath();
cxt.moveTo(40, 20);
cxt.lineTo(40, 90);
cxt.lineTo(80, 90);
//閉合路徑，把最后這個點和第一個點moveTo()閉合
cxt.closePath();
//填充矩形
//cxt.fill();
cxt.stroke();
//空心矩形
cxt.strokeRect(100, 20, 70, 70);
//填充矩形
//如果希望改變填充的顏色，剛修改畫筆的fillStyle
cxt.fillStyle = "#00FF00";
cxt.fillRect(190,20,50,50);
//畫出圓形 car
//六個參數:arc(x,y,radius,startAngle,endAngle,counterclockwise)
cxt.beginPath();
cxt.arc(270, 40, 20, 0, 360, true);//(x,y,r,開始角度，結束角度，是否順時針)
cxt.closePath();
//填充空心的圓形
cxt.stroke();
//畫筆換色
cxt.fillStyle = "FF0000";
cxt.beginPath();
cxt.arc(320, 40, 20, 0, 360, true); //(x,y,r,開始角度，結束角度，是否順時針)
cxt.closePath();
//填充實心的圓形
cxt.fill();
//畫圖片
//1.創建image對象
var img1 = new Image();
//2.指定是哪個圖片
img1.src = "薩摩耶.jpg";
//注意要加這么一個方法，先加載完成后再畫圖
img1.onload = function () {
cxt.drawImage(img1, 20, 100, 200, 150);
}
//在畫布上寫字
var text = "Hello，親愛噠！";
//設置字體的大小
cxt.fillStyle = "#0000FF";
cxt.font = "30px 華文彩云";
cxt.fillText(text,230,200);
</script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
