<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
// cobj.strokeStyle="#ff0000";
// cobj.rect(0,0,100,100);聲明繪製一個矩形
// cobj.stroke();開始繪製
// cobj.fill();
// drawRect (0,0,300,300)
// function drawRect (x,y,w,h) {
// cobj.rect(x,y,w,h);
// cobj.stroke();
// }
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
請您升級瀏覽器
</canvas>
</body>
</html>
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
// cobj.moveTo(0,0);起點
// cobj.lineTo(100,100);終點
// cobj.stroke();開始繪製
// cobj.beginPath();打斷連續畫圖，重新設置起點
// cobj.lineTo(0,200);
// cobj.lineTo(300,300);
// cobj.lineTo(100,400);
// cobj.stroke();
canvas.οnmοusedοwn=function (e) {//模擬畫板
var mx=e.layerX;
var my=e.layerY;
cobj.moveTo(mx,my);
canvas.οnmοusemοve=function (e) {
var endx=e.layerX;
var endy=e.layerY;
cobj.lineTo(endx,endy);
cobj.stroke();
}
canvas.οnmοuseup=function () {
canvas.οnmοusemοve=null;
canvas.οnmοuseup=null;
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
請您升級瀏覽器
</canvas>
</body>
</html>
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
//實現畫矩形
drawRect(100,100,200,200);
drawCircle(150,150,50);
function drawRect (x,y,w,h) {
cobj.beginPath();
cobj.moveTo(x,y);
cobj.lineTo(x+w,y);
cobj.lineTo(x+w,y+h);
cobj.lineTo(x,y+h);
cobj.closePath();
cobj.stroke();
}
//畫圓形
function drawCircle (x,y,r) {
cobj.beginPath();
for (var i=0; i<360; i++) {
cobj.lineTo(x+r*Math.cos(i*Math.PI/180),y+r*Math.sin(i*Math.PI/180));//i爲角度，則lineto的參數爲弧度
cobj.stroke();
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
請您升級瀏覽器
</canvas>
</body>
</html>
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
cobj.lineWidth=15;//設置線條的粗細
//cobj.lineCap="square";設置起點的樣式爲方形，round爲圓形
//cobj.lineJoin ="bevel";設置拐角的類型，round爲圓角，bevel爲斜角
cobj.miterLimit=3;
cobj.moveTo(100,100);
cobj.lineTo(200,200);
cobj.lineTo(180,100);
cobj.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
請您升級瀏覽器
</canvas>
</body>
</html>
