canvas-a11htmlANDcanvas.html_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

canvas-a11htmlANDcanvas.html_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><style>    #canvas-wrapper{        width: 1200px;        height: 800px;        position: relative;        margin:50px auto;    }    #canvas{        border: 1px #ddd solid;    }    #controller{        position: absolute;        top:30px;        left:30px;        background:rgba(0,85,116,0.7);        padding:5px 20px 25px 20px;        border-radius: 10px 10px;    }    #controller h1{        color: white;        font-weight: bold;        font-family: "Microsoft Yahei";    }    #controller #canvas-btn{        display: inline-block;        background: #8b0;        color: white;        font-size: 14px;        padding: 5px 15px;    }    #controller #canvas-btn:hover{        text-decoration: none;        background:#7a0;    }    #controller .color-btn{        display: inline-block;        padding:5px 15px;        border-radius: 6px 6px;        font-size: 14px;        margin-top: 10px;        margin-right: 5px;        text-decoration: none;    }    #controller .color-btn:hover{        text-decoration: none;    }    #controller #white-color-btn{        background-color: white;    }    #controller #black-color-btn{        background-color: black;    }</style><body>    <div id="canvas-wrapper">        <canvas id="canvas">            当前游览器不支持Canvas,请更换游览器再试！        </canvas>        <div id="controller">            <h1 id="Canvas-绘图之旅">Canvas 绘图之旅</h1>            <a href="#" id="canvas-btn">stop</a>            <a href="#" class="color-btn" id="white-color-btn">white</a>            <a href="#" class="color-btn" id="black-color-btn">black</a>        </div>    </div>    <script>        var balls = [];        var isMoving = true;        var themeColor = "white";        var canvas = document.getElementById("canvas");        window.onload = function(){            canvas.width = 1200;            canvas.height = 800;                        if(canvas.getContext('2d')){                var context = canvas.getContext('2d');                // 产生100个小球                for(var i=0;i<100;i++){                    var R = Math.floor(Math.random()*255);                    var G = Math.floor(Math.random()*255);                    var B = Math.floor(Math.random()*255);                    var radius = Math.random()*50+20;                    aBall = {                        color : "rgb(" + R + "," + G + "," + B + ")",                        radius : radius,                        x : Math.random()*(canvas.width-2*radius) + radius,                        y : Math.random()*(canvas.height-2*radius) + radius,                        vx : (Math.random()*5 + 5) * Math.pow(-1,Math.floor(Math.random()*100)),                        vy : (Math.random()*5 + 5) * Math.pow(-1,Math.floor(Math.random()*100)),                    }                    balls[i] = aBall;                }                // 绘制并运动                setInterval(function(){                    draw(context);                    if(isMoving){                        update(canvas.width,canvas.height)                    }                },50)                // stop                document.getElementById("canvas-btn").onclick = function(event){                    if(isMoving){                        isMoving = false;                        this.text = "start";                    }else{                        isMoving = true;                        this.text = "stop";                    }                    return false;                }                 // white                document.getElementById("white-color-btn").onclick = function(event){                    themeColor = "white";                    return false;                }                // black                document.getElementById("black-color-btn").onclick = function(event){                    themeColor = "black";                    return false;                }            }else{                alert("当前游览器不支持Canvas,请更换游览器再试！")            }        }        function draw(cxt){            // var canvas = cxt.canvas;            cxt.clearRect(0,0,canvas.width,canvas.height);            if(themeColor == "black"){                console.log("black theme");                cxt.fillStyle = "black";                cxt.fillRect(0,0,canvas.width,canvas.height)            }            for(var i=0;i<balls.length;i++){                cxt.fillStyle = balls[i].color;                cxt.beginPath();                    cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2);                cxt.closePath();                cxt.fill();            }        }        function update(){            for(var i=0;i<balls.length;i++){                balls[i].x += balls[i].vx;                balls[i].y += balls[i].vy;                // 边缘检测                if(balls[i].x - balls[i].radius <= 0){                    balls[i].vx = -balls[i].vx;                    balls[i].x = balls[i].radius;                }                if(balls[i].x + balls[i].radius >= canvas.width){                    balls[i].vx = -balls[i].vx;                    balls[i].x = canvas.width - balls[i].radius;                }                if(balls[i].y - balls[i].radius <= 0){                    balls[i].vy = -balls[i].vy;                    balls[i].y = balls[i].radius;                }                if(balls[i].y + balls[i].radius >= canvas.height){                    balls[i].vy = -balls[i].vy;                    balls[i].y = canvas.height - balls[i].radius;                }            }        }    </script></body></html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。