<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="js/modernizr.js"></script>
<title>A simple canvas</title>
</head>
<body οnlοad="drawACircle()">
<script type="text/javascript">
function drawACircle()
{
if(!Modernizr.canvas)alert("你的浏览器不支持canvas");
else
{
//定义变量
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
//画矩形
cxt.fillStyle="#ffff00";
cxt.fillRect(50,50,100,100)
//画圆
cxt.arc(700,180,150,0,Math.PI*2,true);
cxt.fill();
//画渐变的矩形
var grd=cxt.createLinearGradient(0,0,600,50);
grd.addColorStop(0,"#fffff0");
grd.addColorStop(1,"#653200");
cxt.fillStyle=grd;
cxt.fillRect(100,100,2000,2000)
//drawImage
var img=new Image();
img.src="images/sample.jpg";
cxt.drawImage(img,100,100);
}
}
</script>
<canvas id="canvas" width="800" height="400"> </canvas>
</body>
</html>
Html5新特性之canvas标签
最新推荐文章于 2024-09-18 09:28:47 发布