HTML5 ???
<canvas></canvas>? HTML5? ???? ??? ?????. ?? DOM ??? ????? ?? ??, ??? ? ???? ??? ???? js? ???? ?? ??? ? ????. .
???? ??????
HTML5 <canvas> ??? ????(????? JavaScript)? ?? ???? ???? ??? ? ?????. ??? ????? ????? ????? ???? ???? ??? ???.
Canva? ???? ??, ??, ?, ??? ??? ??? ???? ???? ??? ? ????.
????? IE8 ? ?? ??? ??? ?? ????? <canvas> ??? ?????.
??? ??? ???? ???? ??? ???? ? ??? ????.
context.fill()//???
context.Stroke()//??? ???
style: ???? ??? ?? ??? ???
context.fillStyle//Fill style
???? ???//??? ???
?
context.lineWidth//??? ??? ???? ??:
?? ?? ?? ??: "red" "green" "blue"
16?? ?? ?: "#EEEEFF" rgb(1-255, 1-255,1-255) rgba(1-255,1-255,1-255, ???)
??? ?? ?? ???:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//第一個(gè)起點(diǎn)
cans.lineTo(120,90);//第二個(gè)點(diǎn)
cans.lineTo(220,60);//第三個(gè)點(diǎn)（以第二個(gè)點(diǎn)為起點(diǎn)）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>??? ?????? 2?? ?????. ???? ?? ?? ??? (0,0)<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>??: ????? fillRect() ???? ?????. ?? ???? ??? ?? ??? ????? ??? ??? ? ? ????. ??? ????? fillRect(X,Y)? ??? ??? ????. ,Width,Height) , ?? ??? ??? ????. ??? X? Y? ???? ?? ??? ???? ?? ????? ?????. !
??
?????: ??? ? ??? ???? arc(X,Y,Radius,startAngle,endAngle,anticlockwise)???. ?? (? ??? X ??, ? ??? Y ??, ??, ?? ??)? ?????. (???), ?? ?? ???, ??? ?? ?? ?? ??)
??? - ?????
?????? ????, ?, ?, ??? ?? ?? ? ???, ??? ??? ????? ??? ?? ?? ??? ?? ? ????.
??? ?????? ???? ???? ? ??? ????.
createLinearGradient(x,y,x1,y1) - ? ????? ???
createRadialGradient(x,y, r,x1,y1,r1) - ???/?? ????? ???
????? ??? ??? ?? ? ? ??? ?? ??? ???? ???. <… ?? ?? ????, ??? ?? ?? ?? ??? ????.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>??? - ???
text: ??? ???
x: ??? ???? x ???
y : ??? ???? y???
context.font: ?? ??? ??
context.textAlign: ?? ??
??, ?, ???, ???
context.textBaseline: ?? ??
??, ????, ??, ???, ?? ??、 ?
????
