您现在的位置是：网站首页 > 代码编程 > WEB前端WEB前端

【原】利用canvas来制作网站logo图片

不忘初心 2019-05-27 围观() 评论() 点赞() 【WEB前端】

简介：博客一直没有logo，苦于ps技术不咋地，来这里学习如何利用canvas来绘制网站logo，非常的简单，一学就会。

博客一直没有logo，苦于ps技术不咋地，只好利用canvas来简单绘制一个网站logo，非常的实用，如果大家的网站logo不是很复杂，也可以参考一下本教程。

之前我的博客logo长这样：

利用canvas来制作网站logo图片

看着也还可以，对用户来说是无感的，看一下源码，并不是img标签，而是一个a和span标签组合而成的：

利用canvas来制作网站logo图片

投机取巧，终归不是正道。

不多啰嗦，直接上代码：

<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body onload="draw('canvas')">

	<!-- 对于高清屏，需要配置相应的缩放比例 -->
	<canvas id="canvas" width="340" height="156" style="width:170px;height:78px"></canvas>

	<script type="text/javascript">
		function draw(id){
		    var canvas = document.getElementById(id);
		    var context = canvas.getContext('2d'); //获取对应的2D对象(画笔)

		    context.scale(2, 2); //设置缩放比例，防止高清屏模糊

		    context.fillStyle = 'rgba(255,255,255,0)'; //设置填充的背景颜色,rgba(255,255,255,0)是透明png背景色
		    context.fillRect(0,0,170,78); //绘制矩形

		    context.fillStyle = '#fff'; //设置填充的颜色
		    context.strokeStyle = '#fff'; //设置画笔的颜色

		    context.font = "30px '微软雅黑'"; //设置字体
		    context.fillText('积微成著', 25 , 40); //设置文案、坐标

		    context.font = "12px '微软雅黑'";
		    context.fillText('不积跬步无以至千里', 35, 62); //设置文案、坐标
		}
	</script>
</body>
</html>