HTML5 ???

?????

HTML5 <canvas> ??? ????(?? JavaScript)? ?? ???? ??? ? ?????.

???? ??? ????, ????? ????, ?? ???? ? ?? ?? ???? ????.

<canvas> ??? ???? ?? ??????? ???? ???? ????? ???? ???.

Canva? ???? ??, ??, ?, ??? ??? ??? ???? ???? ??? ? ????.

???? ??

Internet Explorer 9+, Firefox, Opera, Chrome ? Safari? <canvas> ??? ?????.

??: Internet Explorer 8 ?? IE ??? ????? <canvas> ??? ???? ????.

???(Canvas)

??? ? ??? ???? <canvas> ??? ?? ??? ???? ??? ????.

??: ????? <canvas> ???? ???? ??? ????.

<canvas>??? ?? ??? ????.

<canvas id="myCanvas" width="200" height="100">< ;/canvas> ;

??: ??? ????? id ??(?? ?????? ???)? ???? ?? ?? ? ?? ??? ???? ??? ?????. ???.

?: HTML ????? ?? <canvas> ??? ??? ? ????.

??? ??? ???? ???? ?????.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
</canvas>
</body>
</html>

????? ???? ??? ???

JavaScript? ???? ??? ???

??? ?? ???? ??? ??? ????. ?? ??? ??? JavaScript ??? ????? ???:

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

???? ?? ??:

?? ?:

?? <canvas> ??? ????.

var c=document.getElementById ("myCanvas");

?? ?? ???? ??? ????.

var ctx=c.getContext( " 2d");

getContext("2d") ??? ??? ??? ??, ????, ?, ??, ? ?? ??? ??.

?? ? ?? ??? ??? ????? ????.

ctx.fillStyle="#FF0000";
ctx.fillRect(0, 0,150,75);

fillStyle ??? CSS ??, ????? ?? ???? ?????. fillStyle? ?? ??? #000000(???)???.

fillRect(x,y,width,height) ???? ????? ?? ??? ??? ?????.

??? ??

???? 2?? ?????.

??? ?? ??? ??? (0,0)

?? fillRect ????? (0,0,150,75)? ????? ????.

??: ???? ?? ? ???(0,0)?? ???? 150x75 ????? ????.

?? ??

??? ?? ???? X, Y ??? ???? ???? ??? ?????. ???? ???? ???? ???? ?? ??? ?????.

??? - ??

???? ?? ???? ?? ? ?? ??? ?????.

moveTo(x ,y) ? ???? ??

lineTo(x,y) ? ???? ?

?? ???? ????()? ????? "??" ??? ???? ???.

????

?? ??? ?????. (0,0) ? ? ??(200,100) ?? ?? ????() ???? ???? ?? ????:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
</body>
</html>

???? ?? ??:

???? ?? ???? ?? ??? ?????.

arc(x,y,r ,start,stop)

??? ?? ?? ? ????()? ???()? ?? "??" ???? ?????.

arc() ???? ???? ? ???:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>

???? ?? ??:

??? - ???

???? ???? ???? ????. ??? ??? ??? ??? ????.

??- ?? ??

fillText(text,x,y) - ???? ?? ??? ???

trokText(text,x,y) - ??? ???? ? ???

????

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,30);
    ctx.strokeText("你好嗎！",10,80);
</script>
</body>
</html>

???? ?? ??:

??? - ?????

?????? ????, ?, ?, ??? ?? ?? ? ??? ??? ??? ??? ??? ? ????. ??? ??? ?????.

??? ?????? ???? ???? ? ??? ????.

createLinearGradient(x,y,x1,y1) - ? ????? ???

createRadialGradient(x,y,r,x1,y1,r1) - ???/?? ????? ??

????? ??? ??? ?? ? ? ?? ? ?? ?? ??? ???? ???. ??. <… ?? ???? ???? ?????? ??? ?? ????, ??? ?? ?? ?? ??? ????.

????

?? ?????? ???? createLinearGradient()? ?????. ???? ??????? ???:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // 創(chuàng)建漸變
    var grd=ctx.createLinearGradient(0,0,200,10);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // 充滿度
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

???? ?? ??:

createRadialGradient()? ???? ???/?? ?????? ????. ???? ??????? ???:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Create gradient
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

???? ?? ??:

??? - ???

???? ??? ??? ??? ?? ??? ???? ??? ? ??? ??? ??? ? ????.

???? ??? ?? ?? ?? ??:

drawImage(image,x,y)

??? ??

????

??? ?? ???:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p>使用圖像:</p>
<img id="scream" src="http://img.blog.163.com/photo/g8yDNFsGMeq-pzHY2_n3aQ==/356628795492853826.jpg" alt="The Scream" width="220" height="277"><p>畫布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    img.onload = function() {
        ctx.drawImage(img,10,10);
    }
</script>
</body>
</html>

???? ?? ??:

HTML ??? ?? ???

??? ?? ??? ??? ?? ???? ?????.

HTML <???> 標(biāo)簽

? ?

標(biāo)簽	描述
<canvas>	HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

?標(biāo)簽??>

? ? ?
< span style="font-size: 16px;">描述

? ? ?<???>

HTML5 ? ??? 元素使?? JavaScript? ?????.

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,30); ctx.strokeText("你好嗎！",10,80); </script> </body> </html>

?????? ???

????