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

创建HTML5 LOGO，Canvas绘图

2012-07-10 16:56 344 查看
使用html5的canvas 画图比直接使用图片有一个很大的优点就是节省空间，一张90kb大的图片,如果使用代码来画的话只需要4kb，类似于矢量图。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Logo</title>
<style>
footer {display:block; border-top: 1px solid orange; margin:10px; font-family: "Trebuchet MS", Arial, Helvetical,sans-serif; font-weight: bold;}

article{display:block; font-family: Georgia,"Times New Roman", Times, serif;margin: 5px;}
</style>
<script type="text/javascript">
function draw() {
var c = document.getElementById("firstcancas");
var cxt = c.getContext("2d");
//红色区域，及其坐标
cxt.fillStyle = "#E34C26";
cxt.beginPath();
cxt.moveTo(39,250);
cxt.lineTo(17,0);
cxt.lineTo(262,0);
cxt.lineTo(239,250);
cxt.lineTo(139,278);
cxt.closePath();
cxt.fill();

cxt.fillStyle = "#F06529";
cxt.beginPath();
cxt.moveTo(139,257);
cxt.lineTo(220,234);
cxt.lineTo(239,20);
cxt.lineTo(139,20);
cxt.closePath();
cxt.fill();

cxt.fillStyle = "#EBEBEB";
cxt.beginPath();
cxt.moveTo(139,113);
cxt.lineTo(98,113);
cxt.lineTo(96,82);
cxt.lineTo(139,51);
cxt.lineTo(62,51);
cxt.lineTo(70,144);
cxt.lineTo(139,144);
cxt.closePath();
cxt.fill();

cxt.beginPath();
cxt.moveTo(139,193);
cxt.lineTo(105,184);
cxt.lineTo(103,159);
cxt.lineTo(76,207);
cxt.lineTo(139,225);

cxt.closePath();
cxt.fill();
}

</script>

</head>
<body onLoad="draw();">

<canvas id="firstcancas" style="border:2px dotted red;" width="600" height="400"></canvas>
</body>
</html>


上段代码主要是在canvas上draw path 的使用，效果图如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航