<!doctype html>
<html>
<head></head>
<body>
<canvas width="500" height="800" style="background:yellow" id="canvas">
您的瀏覽器當前版本不支持canvas標籤
</canvas>
<script>
//獲取畫布DOM 還不可以操作
var canvas=document.getElementById('canvas');
//alert(canvas);
//設置繪圖環境
var cxt=canvas.getContext('2d');
//alert(cxt);
//畫一條線段。
//開啓新路徑
cxt.beginPath();
//設定畫筆的寬度
cxt.lineWidth=10;
//設置畫筆的顏色
cxt.strokeStyle="#ff9900";
//設定筆觸的位置
cxt.moveTo(20,20);
//設置移動的方式
cxt.lineTo(100,20);
//畫線
cxt.stroke();
//封閉路徑
cxt.closePath();
//畫一個空心圓形 凡是路徑圖形必須先開始路徑，畫完圖之後必須結束路徑
//開始新路徑
cxt.beginPath();
//重新設置畫筆
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
//封閉新路徑
cxt.closePath();
//畫一個實心圓形
cxt.beginPath();
//設置填充的顏色
cxt.fillStyle="rgb(255,0,0)";
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//畫一個矩形
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.closePath();
//其他方法 建議使用此方式
cxt.strokeRect(300,150,100,100)
//實心矩形
cxt.beginPath();
cxt.rect(300,270,100,100);
cxt.fill();
cxt.closePath();
//其他方法 建議使用此方式
cxt.fillRect(300,390,100,100);
//設置文字
cxt.font="40px 宋體";//css font屬性
cxt.fillText("無兄弟，不編程",20,300);
//將筆觸設置爲1像素
cxt.lineWidth=1;
cxt.strokeText("無兄弟，不編程",20,350);
//畫圖 把一幅圖片畫到畫布中 注意webkit內核的瀏覽器 chrome和獵豹不支持
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,20,370,230,306);
//畫一個三角形
cxt.beginPath();
//移動至開始點
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();//填充或者畫路徑需要先閉合路徑再畫
cxt.stroke();
//實心三角形
cxt.beginPath();
//移動至開始點
cxt.moveTo(300,600);
cxt.lineTo(300,700);
cxt.lineTo(400,650);
cxt.closePath();
cxt.fill();
//旋轉圖片 圖片
//設置旋轉環境
cxt.save();
//在異次元空間重置0,0點的位置
cxt.translate(20,20);
//圖片/形狀旋轉
//設置旋轉角度 參數是弧度 角度 0-360 弧度=角度*Math.PI/180
cxt.rotate(-30*Math.PI/180);
//旋轉一個線段
cxt.lineWidth=10;
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//將旋轉之後的元素放回原畫布
cxt.restore();
//過程不可顛倒 先設置00點在旋轉角度，然後畫圖
//旋轉小萌萌
cxt.save();
cxt.translate(20,370);
cxt.rotate(-10*Math.PI/180);
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,0,0,230,306);
cxt.restore();
</script>
</body>
</html>HTML5 03 Canvas介紹
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章