html5鼠标移动创建画布_如何在HTML5中创建动画3D画布对象

于 2020-08-06 02:51:35 发布
阅读量201 收藏 1
点赞数
文章标签： css js javascript html canvas ViewUI
原文链接：https://www.script-tutorials.com/how-to-create-3d-canvas-object-in-html5/
版权
本文介绍如何使用HTML5的画布API创建一个3D星形，并使其绕轴旋转。通过设置HTML结构、CSS样式和JavaScript代码，实现了一个动态的、具有阴影效果的3D图形。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html5鼠标移动创建画布

3D Canvas HTML5
3D Canvas HTML5

Custom drawn 3d object on canvas (html5). Today’s lesson very interesting, we’ll learn how to create 3D objects using HTML5. This is our first lesson on the practice HTML5. In this tutorial we will make a quadrangular star. Which will rotate around its axis. Read more.

在画布(html5)上自定义绘制的3d对象。 今天的课程非常有趣，我们将学习如何使用HTML5创建3D对象。 这是我们关于HTML5练习的第一课。 在本教程中，我们将制作一个四边形的星星。 它将绕其轴旋转。 阅读更多。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。 这是我们示例的源代码：

index.html (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>3D Canvas HTML5</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
</head>
 <body>
    <div class="example">
        <canvas id="star_object" style="border:1px solid black;"><p class="noCanvas">Sorry, your browser don`t support Canvas in HTML5</canvas>
    </div>
 </body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <title>3D Canvas HTML5</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
</head>
 <body>
    <div class="example">
        <canvas id="star_object" style="border:1px solid black;"><p class="noCanvas">Sorry, your browser don`t support Canvas in HTML5</canvas>
    </div>
 </body>
</html>

Very easy, isn`t it? I just draw here our canvas object. Main drawing will in javascript of course.

很简单，不是吗？ 我只是在这里画我们的画布对象。 主图当然会使用javascript。

步骤2. CSS (Step 2. CSS)

Here are single CSS file with all necessary styles (this is just styles for our example layout):

这是具有所有必需样式CSS文件(这只是示例布局的样式)：

css / main.css (css/main.css)

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}


body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

步骤3. JS (Step 3. JS)

Here are our main JS code:

这是我们的主要JS代码：

js / main.js (js/main.js)

var iStarSize = 150;
var iCanvasWidth = 500;
var iCanvasHeight = 500;
var context, canvas;
var x, y;
var degrees = 0.0;
var dx, dy;
function run() {
    degrees += 0.1;
    if (x + dx > iStarSize/2 || x + dx < -iStarSize/2)
        dx = -dx;
    x += dx;
    /*if (y + dy > iStarSize/2 || y + dy < -iStarSize/2) // for future
        dy = -dy;
    y += dy;*/
    render();
}
function render() {
    context.clearRect(0, 0, iCanvasWidth, iCanvasWidth);
    context.save();
    // set initial position
    context.translate( iStarSize * 1.5, iStarSize * 1.5 );
    // set the style properties
    context.fillStyle = '#bbb';
    context.strokeStyle = '#000';
    context.lineWidth = 2;
    // starting custom object - star
    context.beginPath();
    // you can uncomment it to add ordinary rotate
    //context.rotate(degrees);
    // changing necessary points to simulate 3d rotating
    context.moveTo( 0, -iStarSize );
    context.lineTo( iStarSize / 10 - x / 5, - iStarSize / 5 );
    context.lineTo( iStarSize / 2 - x, 0 );
    context.lineTo( iStarSize / 10 - x / 5, iStarSize / 5 );
    context.lineTo( 0, iStarSize );
    context.lineTo( -iStarSize / 10 + x / 5, iStarSize / 5 );
    context.lineTo( -iStarSize / 2 + x, 0 );
    context.lineTo( -iStarSize / 10 + x / 5, - iStarSize / 5 );
    context.lineTo( 0, -iStarSize );
    // add shadow to object
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(180, 180, 180, 0.8)';
    // fill shape, draw stroke
    context.fill();
    context.stroke();
    context.closePath();
    context.restore();
    // echo some debug information
    context.font = '12px Verdana';
    context.fillStyle = '#000';
    context.fillText('x: ' + x + '; y: ' + y, 10, 15);
    context.fillText('dx: ' + dx + '; dy: ' + dy, 10, 30);
}
window.onload = function(){
    canvas = document.getElementById('star_object');
    // set size of our canvas area
    canvas.width = iCanvasWidth;
    canvas.height = iCanvasWidth;
    context = canvas.getContext('2d');
    // init of inner variables
    x = y = 1;
    dx = dy = 4;
    setInterval(run, 20);
};


var iStarSize = 150;
var iCanvasWidth = 500;
var iCanvasHeight = 500;
var context, canvas;
var x, y;
var degrees = 0.0;
var dx, dy;
function run() {
    degrees += 0.1;
    if (x + dx > iStarSize/2 || x + dx < -iStarSize/2)
        dx = -dx;
    x += dx;
    /*if (y + dy > iStarSize/2 || y + dy < -iStarSize/2) // for future
        dy = -dy;
    y += dy;*/
    render();
}
function render() {
    context.clearRect(0, 0, iCanvasWidth, iCanvasWidth);
    context.save();
    // set initial position
    context.translate( iStarSize * 1.5, iStarSize * 1.5 );
    // set the style properties
    context.fillStyle = '#bbb';
    context.strokeStyle = '#000';
    context.lineWidth = 2;
    // starting custom object - star
    context.beginPath();
    // you can uncomment it to add ordinary rotate
    //context.rotate(degrees);
    // changing necessary points to simulate 3d rotating
    context.moveTo( 0, -iStarSize );
    context.lineTo( iStarSize / 10 - x / 5, - iStarSize / 5 );
    context.lineTo( iStarSize / 2 - x, 0 );
    context.lineTo( iStarSize / 10 - x / 5, iStarSize / 5 );
    context.lineTo( 0, iStarSize );
    context.lineTo( -iStarSize / 10 + x / 5, iStarSize / 5 );
    context.lineTo( -iStarSize / 2 + x, 0 );
    context.lineTo( -iStarSize / 10 + x / 5, - iStarSize / 5 );
    context.lineTo( 0, -iStarSize );
    // add shadow to object
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(180, 180, 180, 0.8)';
    // fill shape, draw stroke
    context.fill();
    context.stroke();
    context.closePath();
    context.restore();
    // echo some debug information
    context.font = '12px Verdana';
    context.fillStyle = '#000';
    context.fillText('x: ' + x + '; y: ' + y, 10, 15);
    context.fillText('dx: ' + dx + '; dy: ' + dy, 10, 30);
}
window.onload = function(){
    canvas = document.getElementById('star_object');
    // set size of our canvas area
    canvas.width = iCanvasWidth;
    canvas.height = iCanvasWidth;
    context = canvas.getContext('2d');
    // init of inner variables
    x = y = 1;
    dx = dy = 4;
    setInterval(run, 20);
};

I tried to comment quite any row of my code. You should just point attention what I doing inside ‘render’ function.

我试图注释我的代码的任何行。 您应该注意我在“渲染”功能中所做的事情。

现场演示

结论 (Conclusion)

I hope our first lesson about working with HTML5 showed you an interesting, if you have any suggestions, or you just have to say – we are glad to hear it. Good luck!

我希望我们关于使用HTML5的第一堂课给您带来了有趣的印象，如果您有任何建议，或者只是要说–我们很高兴听到它。 祝好运！

翻译自: https://www.script-tutorials.com/how-to-create-3d-canvas-object-in-html5/

html5鼠标移动创建画布

cukengwei3786
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值