创建HTML5 LOGO，Canvas绘图

最新推荐文章于 2022-02-11 16:59:56 发布

zdw890412

最新推荐文章于 2022-02-11 16:59:56 发布

阅读量2.8k

点赞数

分类专栏： html5 文章标签： html5 html border function path c

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用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 的使用，效果图如下