HTML5 Canvas 自定义笔刷代码,Css代码库,德仔网

代码语言

代码分类

【Css】 HTML5 Canvas 自定义笔刷

作者:彭博 / 发布于2012/7/16/ 700

HTML5 Canvas 自定义笔刷

<div><!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 canvas - 自定义笔刷</title>
<style>
.container {
color: #000;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 800px;
}

/* custom styles */
.column1 {
float:left;
width:500px;
}
.column2 {
float:left;
padding-left:20px;
width:170px;
}
#panel {
border:1px #000 solid;
box-shadow:4px 6px 6px #444444;
cursor:crosshair;
display:block;
margin:0 auto;
height:600px;
width:1000px;
}
#color {
border:1px #000 solid;
box-shadow:0px 4px 6px #444444;
cursor:crosshair;
}
.column2 > div {
margin-bottom:10px;
}
#preview, #pick {
background-color:rgb(0, 195, 135);
border:1px #000 solid;
box-shadow:2px 3px 3px #444444;
height:40px;
width:80px;

border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div class="container">
<div class="column1">
<canvas id="color" width="500" height="128"></canvas>
</div>
<div class="column2">
<div>颜色预览:</div>
<div id="preview"></div>
<div id="pick"></div>
</div>
<div style="clear:both;"></div>
</div>
<canvas id="panel" width="1000" height="600"></canvas>
</body>
</html>
</div>

试试其它关键字

　自定义笔刷　

同语言下

可能有用的

彭博贡献的其它代码(4)