canvas

最新推荐文章于 2023-07-05 19:11:54 发布

chenbinGood

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量120

点赞数

文章标签： JavaScript HTML XHTML ViewUI

<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//下面两种方式都可以设置颜色
//方法1：
ctx.fillStyle = "red";
//方法2：
//ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; // 红0绿0蓝100 透明度 0.5
ctx.fillRect (100, 200, 1, 150); //X座标200Y座标300，X长度1,Y长度150 
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script language="javascript" type="text/javascript"> 
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); 
ctx.beginPath();
ctx.arc(95,80,35,0,Math.PI,true); 
ctx.moveTo(60,80);
ctx.lineTo(30,80);
ctx.moveTo(200,80);
ctx.arc(165,80,35,0,Math.PI,false);
ctx.stroke();
}
}
</script> 
</head> 
<body onload="draw();"> 
<canvas id="tutorial" width="1000" height="1050"></canvas> 
</body> 
</html>