首页   >   代码编程   >   WEB前端

利用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>

将上述代码拷贝出来保存为一个html,直接在浏览器打开,然后对着左上角点击右键,就可以将绘制的图片保存下来,这就是logo了

利用canvas来制作网站logo图片

大功告成!

QQ群Ⅰ: 686430774 (已满)

QQ群Ⅱ: 718410762 (已满)

QQ群Ⅲ: 638620451

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2019-05-27

永久地址:https://www.jiweichengzhu.com/article/3c0befd58ab14e50a9ac77e14056a2c1

评论