<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas</title>
<style type="text/css">
#canvas {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
ctx.fillStyle = '#0000FF';
ctx.fillRect(0, 0, 200, 200);
ctx.font = 'normal 100px 微软雅黑';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#FFFFFF';
ctx.fillText('HW', 100, 75);
ctx.font = 'normal 20px 微软雅黑';
ctx.fillText('Hello World', 100, 150);
var img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function () {
document.body.appendChild(img);
};
</script>
</body>
</html>利用canvas制作简单的logo
猜你喜欢
转载自www.cnblogs.com/xiaoyucoding/p/9459899.html
今日推荐
周排行