HTML5 画布绘制海报

作者：System 时间：2024年08月12日分类：所有,html5 字数：1120

以下是一个简单的HTML5画布示例，用于绘制一个海报样式的图形：




<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
canvas {
    display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
 
<script>
window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
 
    // 海报背景
    ctx.fillStyle = '#3498db';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    // 标题
    ctx.font = '40px Arial';
    ctx.fillStyle = '#fff';
    ctx.fillText('欢迎来到我的世界', 50, 70);
 
    // 图片
    var image = new Image();
    image.src = 'poster.jpg'; // 替换为你的图片路径
    image.onload = function() {
        ctx.drawImage(image, 50, 120, 400, 150);
    };
 
    // 按钮
    ctx.beginPath();
    ctx.rect(50, 280, 400, 40);
    ctx.fillStyle = '#fff';
    ctx.fill();
 
    ctx.font = '20px Arial';
    ctx.fillStyle = '#3498db';
    ctx.fillText('点击进入', 100, 310);
};
</script>
 
</body>
</html>

这段代码会在网页上创建一个画布，并在其上绘制一个简单的海报样式。你需要替换image.src中的图片路径为你自己的图片路径。这个示例展示了如何使用HTML5画布绘制文本、图像和形状，并且是学习HTML5画布绘图的一个基础示例。

HTML5 画布绘制海报

评论已关闭

推荐阅读