html5在线画板菱形怎么画,使用HTML5构建一个在线画板应用

CSS

语言：

CSSSCSS

确定

body {

background: #384047;

font-family: sans-serif;

}

canvas {

background: #fff;

display: block;

margin: 30px auto 10px;

border-radius: 5px;

box-shadow: 0 4px 0 0 #222;

cursor: crosshair;

}

.controls {

min-height: 60px;

margin: 0 auto;

width: 600px;

border-radius: 5px;

overflow: hidden;

}

ul {

list-style: none;

margin: 0;

float: left;

padding: 10px 0 20px;

width: 100%;

text-align: center;

}

ul li,

#newColor {

display: block;

height: 54px;

width: 54px;

border-radius: 60px;

cursor: pointer;

border: 0;

box-shadow: 0 3px 0 0 #222;

}

ul li {

display: inline-block;

margin: 0 5px 10px;

}

.red {

background: #fc4c4f;

}

.blue {

background: #4fa3fc;

}

.yellow {

background: #ecd13f;

}

.selected {

border: 7px solid #fff;

width: 40px;

height: 40px;

}

button {

background: #68b25b;

box-shadow: 0 3px 0 0 #6a845f;

color: #fff;

outline: none;

cursor: pointer;

text-shadow: 0 1px #6a845f;

display: block;

font-size: 16px;

line-height: 40px;

}

#revealColorSelect {

border: none;

border-radius: 5px;

margin: 10px auto;

padding: 5px 20px;

width: 160px;

/* New Color Palette */

}

#colorSelect {

background: #fff;

border-radius: 5px;

clear: both;

margin: 20px auto 0;

padding: 10px;

width: 305px;

position: relative;

display: none;

}

#colorSelect:after {

bottom: 100%;

left: 50%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-color: rgba(255, 255, 255, 0);

border-bottom-color: #fff;

border-width: 10px;

margin-left: -10px;

}

#newColor {

width: 80px;

height: 80px;

border-radius: 3px;

box-shadow: none;

float: left;

border: none;

margin: 10px 20px 20px 10px;

}

.sliders p {

margin: 8px 0;

vertical-align: middle;

}

.sliders label {

display: inline-block;

margin: 0 10px 0 0;

width: 35px;

font-size: 14px;

color: #6d574e;

}

.sliders input {

position: relative;

top: 2px;

}

#colorSelect button {

border: none;

border-top: 1px solid #6a845f;

border-radius: 0 0 5px 5px;

clear: both;

margin: 10px -10px -7px;

padding: 5px 10px;

width: 325px;

}

p {

color: #fff;

padding-left: 46%;

}