您的位置：首页 > Web前端 > HTML5

Html5 Canvas画图

2014-11-19 18:48 281 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function init () {

var c = document.getElementById("myCanvas");
cxt = c.getContext("2d");
//drawRect();
//drawLine();
//drawArc();
drawGradient();
}
//画矩形
function drawRect () {
cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);

}
//画线
function drawLine(){
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
}
//画圆
function drawArc(){
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
//线性渐变矩形
function drawGradient(){
var grd = cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle =grd;
cxt.fillRect(0,0,175,50);

}

window.addEventListener("load",init,false);
</script>
<style type="text/css">
body{
margin: 0px;
font-size: 70%;
font-family: verdana,helvetica,arial,sans-serif;
}

</style>
</head>
<body >
<canvas id="myCanvas" width="200" height="100">Fallback content, in case the browser does not support Canvas.</canvas>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航