canvas画板/写字板

来源：互联网发布：打击垫编程编辑：程序博客网时间：2024/04/29 20:09

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>写字板</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#wrap {
width: 600px;
height: 500px;
/*border: 3px solid red;*/
overflow: hidden;
}

canvas {
border-right: 3px solid orange;
border-bottom: 3px solid orange;
float: left;
}

ul {
/*border: 3px solid blue;*/
float: right;
width: 160px;
list-style-type: none;
}

ul li {
width: 30px;
height: 30px;
margin-top: 20px;
}

ul li:nth-child(1) {
background-color: greenyellow;
}

ul li:nth-child(2) {
background-color: blueviolet;
}

ul li:nth-child(3) {
background-color: orange;
}

ul li:nth-child(4) {
background-color: #00BFFF;
margin-bottom: 20px;
}

#clear {
margin-bottom: 20px;
}

#text {
margin-bottom: 20px;
}
</style>
</head>

<body>
<div id="wrap">
<canvas id="canvas" width="400" height="400"></canvas>
<ul id="ul">
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
<input type="button" name="clear" id="clear" value="清空" />
<input type="button" name="" id="eraser" value="橡皮擦" />
<input type="text" name="text" id="text" value="" placeholder="调节

0 0