html5 canvas填色画游戏代码

来源：互联网 2023-03-16 19:10:31 162

html5 canvas填色画游戏代码

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

html5 canvas填色画游戏代码

新建html文档。

html5 canvas填色画游戏代码

书写hmtl代码。

div id="boxRender">

div id="nowSelectColor"> /div>

div id="colorSelect" class="colorSelect"> /div>

/div>

div class="imgShowRow">

div onclick="changeDraw(0)" style=" background-image: url(exp/A.png);" class="item">

div class="toolBox">汽车/div>

/div>

div onclick="changeDraw(1)" style=" background-image: url(exp/B.png);" class="item">

div class="toolBox">蘑菇/div>

/div>

div onclick="changeDraw(2)" style=" background-image: url(exp/C.png);" class="item">

div class="toolBox">飞机/div>

/div>

div onclick="changeDraw(3)" style=" background-image: url(exp/D.png);" class="item">

div class="toolBox">气球/div>

/div>

div onclick="changeDraw(4)" style=" background-image: url(exp/E.png);" class="item">

div class="toolBox">小鸭/div>

/div>

div onclick="changeDraw(5)" style=" background-image: url(exp/F.png);" class="item">

div class="toolBox">皮球/div>

/div>

html5 canvas填色画游戏代码

书写css代码。

style>

body { margin: 0; padding: 0; }

#boxRender { position: relative; width: 1000px; margin: auto; border: 1px solid #e6eaee; margin-top: 25px; }

.tool { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -web kit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }

.colorSelect { width: 500px; height: 500px; float: left; box-sizing: border-box; padding-top: 50px; }

.colorSelect .item { width: 40px; height: 40px; float: left; margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; }

.imgShowRow { width: 1000px; margin: auto; margin-top: 20px; height: 100px; }

.imgShowRow .item { width: 100px; height: 100px; background-size: cover; background-position: center; border: 1px solid #e6eaee; float: left; position: relative; overflow: hidden; margin-left: 32px; margin-right: 32px; }

.imgShowRow .item:hover .toolBox { top: 0%; transition: all 0.25s linear; }

.imgShowRow .item .toolBox { position: absolute; width: 100%; height: 100%; text-align: center; line-height: 100px; color: white; background-color: rgba(0,0,0,0.4); top: 100%; left: 0; transition: all 0.25s linear; cursor: pointer; }

#nowSelectColor { width: 50px; height: 50px; position: absolute; left: -100px; top: 0; background-color: #000000; border: 1px solid #e6eaee; }

/style>

html5 canvas填色画游戏代码