实例介绍
【实例简介】电子画板示例
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>v1.1.1黑板</title>
<style>
body{
overflow:hidden;
margin:0;
background-color: rgb(1,57,57);
width:100%;
height:100%;
}
#bd{
position: absolute;/*width:98%;height:98%;*/
left:1%;top:1%;border:2px dashed rgb(64,64,64);
box-shadow: 0px 0px 1px 1px rgb(83,83,83);
}
canvas{
border:2px dashed rgba(64,64,64,0);
background-color: rgba(255,255,255,0.1);
}
#Crayon-bottom{
fill:#848436
}
.controlBar{
margin:0 auto;width:100%;position: absolute;left:0;
bottom:-120px;
background-color: rgba(0,0,0,0.1);border-top:1px dashed rgba(255,255,255,0.2);
transition:bottom .6s;
-webkit-transition:bottom .6s;
}
.controlBar:hover{
bottom:0px;
}
.color{
stroke:white;
stroke-width:1px;
}
.c1, #saveImg,#addASet{
fill:rgba(0, 0, 0, 0.2);
stroke:white;
stroke-width:1px;
}
.c{
stroke:rgba(255, 255, 255, 0.6);
stroke-width:1px;
}
.text{
fill:white;
font-family: "微软雅黑";
}
#list{
position: absolute;
margin:0 auto;
top:15px;
}
li{
list-style: none;
display: inline-block;
margin: 5px;
}
a{
text-decoration: none;
padding: 5px 12px;
background-color: transparent;
color: white;
font-size: 14px;
border: 1px solid white;
box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.1);
}
.activted{
background-color:rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body id="body">
<div id="bd">
<canvas id="canvas"></canvas>
</div>
<ul id="list">
<li>
<a href="#" class="activted">1</a>
</li>
</ul>
<div class="controlBar">
<label style="padding-left: 49%;color:white;">=</label>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="120"
viewBox="0 0 30 100" enable-background="new 0 0 30 200">
<defs>
<!--渐变色-->
<linearGradient id ="white" x1="0" x2="1" y1="1" y2="1">
<stop offset="0" stop-color="rgba(255,255,255,1)"/>
<stop offset="0.3" stop-color="rgba(255,255,255,1)"/>
<stop offset="0.66" stop-color="rgba(169,169,169,1)"/>
<stop offset="1" stop-color="rgba(255,255,255,1)"/>
</linearGradient>
<!--渐变色-->
<linearGradient id ="yellow" x1="0" x2="1" y1="1" y2="1">
<stop offset="0" stop-color="rgba(237, 239, 96,1)"/>
<stop offset="0.3" stop-color="rgba(237, 239, 96,1)"/>
<stop offset="0.66" stop-color="rgba(151, 153, 66,1)"/>
<stop offset="1" stop-color="rgba(237, 239, 96,1)"/>
</linearGradient>
<!--渐变色-->
<linearGradient id ="blue" x1="0" x2="1" y1="1" y2="1">
<stop offset="0" stop-color="#2fbbde"/>
<stop offset="0.3" stop-color="#2fbbde"/>
<stop offset="0.66" stop-color="#2A96B2"/>
<stop offset="1" stop-color="#2fbbde"/>
</linearGradient>
<!--渐变色-->
<linearGradient id ="red" x1="0" x2="1" y1="1" y2="1">
<stop offset="0" stop-color="#D86548"/>
<stop offset="0.3" stop-color="#D86548"/>
<stop offset="0.66" stop-color="#A94F38"/>
<stop offset="1" stop-color="#D86548"/>
</linearGradient>
<!--蜡笔-->
<g id="Crayon">
<path id="Crayon-bg" stroke-miterlimit="10" d="M24.8,23.2l-4.2-20l-0.1,0
c-0.2-1.6-4.9-1.7-5.4-1.7c-0.5,0-5.2,0.1-5.4,1.7l0,0l-4.2,20C2.8,23.9,1,24.9,1,26.2v168.1c0,2.7,7.2,4.2,14,4.2
c6.8,0,14-1.5,14-4.2V26.2C29,24.9,27.3,23.9,24.8,23.2z"/>
<g id="Crayon-bottom">
<path d="M15,198.9c-8.1,0-13-1.9-13-3.2c0-1.3,4.9-3.2,13-3.2s13,1.9,13,3.2C28,197,23.1,198.9,15,198.9z"/>
<path d="M28,194c-2.2-1.7-7.7-2.6-13-2.6c-5.3,0-10.8,0.9-13,2.6v-7.7c0-1.3,4.9-3.2,13-3.2s13,1.9,13,3.2V194z"/>
<path d="M28,184.7c-2.2-1.7-7.7-2.6-13-2.6c-5.3,0-10.8,0.9-13,2.6V177c0-1.3,4.9-3.2,13-3.2s13,1.9,13,3.2V184.7z
"/>
<path d="M28,175.4c-2.2-1.7-7.7-2.6-13-2.6c-5.3,0-10.8,0.9-13,2.6v-2.1c0-1.3,4.9-3.2,13-3.2s13,1.9,13,3.2V175.4
z"/>
</g>
<g id="Crayon-up">
<path stroke-miterlimit="10" d="M15,22c8.7,0,14,2,14,3.5v8.2c-2.4-1.8-8.3-2.8-14-2.8
c-5.7,0-11.6,1-14,2.8v-8.2C1,24,6.3,22,15,22z"/>
<path stroke-miterlimit="10" d="M29,45.9c-2.4-1.7-8.3-2.7-14-2.7c-5.7,0-11.6,0.9-14,2.7v-2.2
c0-1.4,5.3-3.3,14-3.3s14,1.9,14,3.3V45.9z"/>
<path stroke-miterlimit="10" d="M29,43.1c-2.4-1.7-8.3-2.6-14-2.6c-5.7,0-11.6,0.9-14,2.6v-8.6
c0-1.3,5.3-3.2,14-3.2s14,1.9,14,3.2V43.1z"/>
</g>
</g>
<!--橡皮-->
<g id="Eraser">
<path fill="url(#white)" d="M42,100c-6.6,0-12-5.2-12-11.7V11.7C30,5.2,35.4,0,42,0h16c6.6,0,12,5.2,12,11.7v76.6
c0,6.5-5.4,11.7-12,11.7H42z"/>
<path fill="#0071BB" d="M70,88.3V49.9H30v38.4c0,6.5,5.4,11.7,12,11.7h16C64.6,100,70,94.8,70,88.3z"/>
<path fill="#0071BB" d="M66,80.6V49.9H34v30.7c0,5.2,4.3,9.4,9.6,9.4h12.8C61.7,90,66,85.8,66,80.6z"/>
</g>
<!--铅笔-->
<g id="Pencil">
<path id="pencil-bg" stroke-miterlimit="10" d="M28.3,195.1V34.8h-0.4l0.4-0.1
c-0.1-0.2-0.2-0.6-0.4-1L15.4,0L15,0.1L14.6,0L2.2,33.4c-0.2,0.4-0.3,0.9-0.5,1.3l0,0v160.3l-0.2,0.2l7,4.8h13.2l7-4.8L28.3,195.1z"
/>
<path opacity="0.6" fill="#231815" d="M7.7,18.5L7.7,18.5c0-0.4,3.1-1.3,7.3-1.3c4.2,0,7.2,0.9,7.2,1.3l0,0c0,0,5.8,15.6,6,16.2
c0.3,0.6-1.8-1.8-2.6-1.8c-1,0-1.8,0.6-2.6,1.9c-2.4-3.2-5-4.9-7.8-4.9c-4.2,0-7.4,3.7-8.5,5.1c-0.6-0.5-1.6-1.2-2.9-1.1
c-0.8,0.1-1.5,0.4-2.2,1L7.7,18.5z"/>
<path opacity="0.3" fill="#231815" d="M15.3,31C15.3,31,15.3,31,15.3,31C11.5,31,8,34.3,8,34.8V190h14V34.8
C19.7,31.9,17.7,31,15.3,31z"/>
<g opacity="0.6">
<path fill="#231815" d="M21.2,191H8.8L3,195l5.8,4h12.3l5.8-4L21.2,191z M15.1,197.4c-3.3,0-6.6-0.4-6.6-2.4c0-3,13.3-3,13.3,0
C21.8,197,18.4,197.4,15.1,197.4z"/>
<path fill="#231815" d="M15.1,193.4c-3.7,0-5.7,1-5.7,1.5c0,0.5,2,1.5,5.7,1.5c3.7,0,5.7-1,5.7-1.5
C20.9,194.4,18.8,193.4,15.1,193.4z"/>
</g>
</g>
<!--画笔-->
<g id="Paintbrush">
<path d="M3.8,135.4c0.1,3.7,0.5,29.5,1.1,64.6h20c0.7-35.1,1.1-60.9,1.1-64.6c0.6-0.1,1.6-0.5,2.4-1.4
c0.8-1,1.1-2.4,0.9-4.1l-0.1,0c0-1.6-1.3-3.1-3.3-4.2V66.7c0,0,0.1-0.1,0.1-0.1c0.8-3.4,10.1-43-8.2-65.1C17.6,1.1,16.7,0,15,0
c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0-0.1,0c-1.1,0-2,0.5-2.8,1.5
C-6.5,24.1,3,64.9,4,66.8v59.1c-2,1.1-3.1,2.5-3.3,4c-0.3,1.7,0,3.1,0.8,4.1C2.2,134.9,3.2,135.3,3.8,135.4z"/>
<path opacity="0.6" d="M25.6,64.5c-0.3-0.5-0.6-0.9-1-1.3l0.1-0.9c1.5-11.2,4.8-36.1-4-55C32.4,27.3,27.3,56.5,25.6,64.5z M6.3,62.5
l0-0.3C4.7,50.5,1.2,24,11.5,5.2c-7,18.4-4.9,42.6-3.7,56l0,0.4C7.3,61.8,6.8,62.2,6.3,62.5z M8.9,61.1L8.9,61.1
C7.7,47.6,5.5,23,12.8,4.7c-4.2,18.1-3.1,41.5-2.3,55.8C9.9,60.7,9.4,60.9,8.9,61.1z M11.5,60.3C10.8,46.1,9.7,23,13.8,5.2
C12.3,23,12.7,46,13,60.1C12.5,60.2,12,60.2,11.5,60.3z M14,60C13.7,45.5,13.3,21.8,15,4c1.6,17.9,1.2,41.6,1,56.1
c-0.3,0-0.6,0-0.9,0C14.7,60,14.3,60,14,60z M16.1,5.2c4.1,17.8,3,40.9,2.3,55.1c-0.5-0.1-0.9-0.1-1.4-0.2C17.2,46,17.6,23,16.1,5.2
z M17.1,4.8c7.3,18.2,5.2,42.8,4,56.3c-0.5-0.2-1.1-0.4-1.6-0.5C20.2,46.2,21.3,22.8,17.1,4.8z M22.1,61.2c1.2-13.4,3.3-37.6-3.7-56
c10.3,18.8,6.8,45.3,5.2,57l0,0.3c-0.5-0.3-1-0.6-1.5-0.9L22.1,61.2z M9.2,7.3c-8.8,18.9-5.5,43.7-4,55l0.1,1
c-0.4,0.4-0.7,0.8-1,1.3C2.7,56.8-2.5,27.4,9.2,7.3z"/>
<path fill="#231815" d="M24.9,125c-2.6-1.1-6-1.8-9.9-1.8c-3.8,0-7.3,0.8-10,2c0.9-2.6,5-4.7,10-4.7C19.8,120.6,23.9,122.5,24.9,125
z"/>
<path display="none" fill="#231815" d="M12.6,432.5c0.3-0.5,1.2-0.9,2.4-0.9c1.2,0,2.1,0.5,2.4,0.9c-0.3,0.5-1.2,1-2.4,1
C13.8,433.5,12.9,433,12.6,432.5z"/>
<path opacity="0.8" fill="#333333" d="M4.9,66.7C4.9,63.6,9.4,61,15,61c5.5,0,9.9,2.4,10.1,5.5c0,0,0,0.1,0,0.1l0,8.4
c-1.8-2.3-5.6-3.8-10.1-3.8c-4.5,0-8.3,1.6-10.1,3.9V66.7z M4.9,77.9c0-3.1,4.5-5.7,10.1-5.7c5.3,0,9.6,2.3,10.1,5.2l0,1.3
c-1.8-2.3-5.6-3.8-10.1-3.8c-4.5,0-8.3,1.6-10.1,3.9V77.9z M4.9,81.6c0-3.1,4.5-5.7,10.1-5.7c5.3,0,9.6,2.3,10.1,5.2l0,1.3
c-1.8-2.3-5.6-3.8-10.1-3.8c-4.5,0-8.3,1.6-10.1,3.9V81.6z M15,79.6c5.3,0,9.6,2.3,10.1,5.2l0,38.5c-1.8-2.3-5.6-3.8-10.1-3.8
c-4.5,0-8.3,1.6-10.1,3.9V85.3C4.9,82.2,9.4,79.6,15,79.6z M24,200c0.7-37.4,1.1-64.2,1.2-65.1c0-2.9-4-5.4-9.1-5.7
c-0.3,0-0.7,0-1,0c-5.6,0-10.1,2.6-10.1,5.7c0,0.8,0.4,27.6,1.2,65.1H24z M27.8,133.3c-0.5,0.6-1.2,0.9-1.6,1
c-0.5-3.4-5.3-6.1-11.1-6.1c-0.4,0-0.7,0-1.1,0c-0.1,0-0.2,0-0.4,0c-0.2,0-0.5,0-0.7,0.1c-0.1,0-0.3,0-0.4,0.1
c-0.2,0-0.4,0.1-0.6,0.1c-0.1,0-0.3,0.1-0.4,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.1,0-0.3,0.1-0.4,0.1c-0.2,0.1-0.4,0.1-0.5,0.2
c-0.1,0-0.3,0.1-0.4,0.1c-0.2,0.1-0.4,0.1-0.5,0.2c-0.1,0-0.2,0.1-0.4,0.2c-0.2,0.1-0.3,0.1-0.5,0.2c-0.1,0.1-0.2,0.1-0.3,0.2
c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3
c-0.1,0.1-0.2,0.1-0.2,0.2c-0.1,0.1-0.2,0.2-0.4,0.3c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.2,0.3-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2
c-0.1,0.1-0.2,0.3-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.1,0.3-0.2,0.5c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.2-0.1,0.3-0.1,0.5
c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0c-0.5-0.1-1.1-0.4-1.6-1c-0.6-0.8-0.8-1.9-0.6-3.3c0.4-2.8,5.6-5.8,13.4-5.8c7.2,0,13.4,2.6,13.4,5.7
h0.5l-0.5,0.1C28.6,131.5,28.4,132.6,27.8,133.3z"/>
</g>
<!--荧光笔-->
<g id="Nidepen">
<path d="M14.7,27H8.1V0l6.6,4.1V27z M27.4,116.7h-1.6c-1.1,0-2.1,0.9-2.1,2.1v69.5h-1.4v-72.2
c0-1.1-0.9-2.1-2.1-2.1H2.6c-1.1,0-2.1,0.9-2.1,2.1v81.9c0,1.1,0.9,2.1,2.1,2.1h17.7c1.1,0,2.1-0.9,2.1-2.1v-4.5h3.5h1.6
c1.1,0,2.1-0.9,2.1-2.1v-1v-71.6C29.5,117.6,28.6,116.7,27.4,116.7z"/>
<path opacity="0.6" d="M17.2,16.6h-1.1v-3.2c0-1.1-0.9-2.1-2.1-2.1H8.8c-1.1,0-2.1,0.9-2.1,2.1v3.2H5.6c-1.1,0-2.1,0.9-2.1,2.1V99
c0,1.1,0.9,2.1,2.1,2.1h11.6c1.1,0,2.1-0.9,2.1-2.1V18.7C19.3,17.5,18.3,16.6,17.2,16.6z"/>
<rect x="1.9" y="43.5" opacity="0.4" width="19" height="70.5"/>
<rect x="1.9" y="43.5" opacity="0.2" fill="white" width="19" height="70.5"/>
</g>
<!--蝴蝶-->
<g id="shape-butterfly">
<path opacity="0.6" d="M4.2,58.7c-0.2,0.9-0.3,2.2-0.4,3.7c-0.1,1.5-0.1,2.7,0.1,3.4c0.3,1.5,0.8,3.4,1.5,5.8c0.8,2.5,1.7,4.3,2.5,5.6
c1.2,2.1,2.4,3.9,3.6,5.5c2.1,2.6,3.9,4.3,5.2,5.3l2.6,2.1c1.2,0.9,2,1.5,2.5,1.8c0.8,0.3,2.2,1.1,4.1,2.3
c0.5,0.2,1.7,0.7,3.7,1.4c2.1,0.7,3.5,1.2,4.2,1.4c1.8,0.5,3.8,0.9,6.2,1.3l3.9,0.4l-3.5-0.3c-6.1-0.6-10.5-1.3-13.1-2
c-2.5-0.7-5.6-2.2-9.3-4.3c-1.7-1-3.1-1.6-4.1-1.8c-1-0.2-1.3-0.1-1,0.4c0.7,1.3,3.9,2.9,9.6,4.8c4.8,1.7,11.4,2.8,19.9,3.6
c7.1,0.6,12.2,0.7,15.3,0.3l0.1,0.2c0,0.2-0.1,0.3-0.2,0.3h0.1l0.1,0.1h28c0,0,0-0.1-0.1-0.1h-0.1c0.3-0.7,0.1-1-0.5-0.8
c-0.3,0.1-0.8,0-1.5-0.2c-0.6-0.2-1-0.3-1.2-0.3l-1.7-0.5c-3-0.5-5.1-0.8-6.3-0.9c-1.6-0.1-2.5-0.1-2.7-0.1c-1,0-1.7,0.2-2.2,0.5
c-0.9,0.6-1.8,0.7-2.6,0.3c-0.4-0.2-0.6-0.4-0.7-0.6c-0.1-0.3,0.3-0.5,1.3-0.6c1.6,0,3-0.2,4.2-0.4c2.3-0.1,3.8-0.3,4.2-0.5
c0.7-0.3,3-1.3,7-2.8c2.9-1.2,4.9-2.2,6.2-3.2c1.2-0.9,2.1-1.6,2.8-2.1c1-0.8,1.7-1.4,2-1.9c1.4-2.1,2.1-3.6,2.2-4.7
c0.3-3,0.3-5,0.2-5.8c-0.2-0.8-0.2-1.4-0.2-1.8c0.1-0.5,0.5-1,1.1-1.5c0.7-0.5,1.3-1.2,1.9-2.2c0.6-0.9,1-1.8,1.1-2.8
c0.4-2.5,0.3-4.4-0.6-5.9c-0.4-0.7-1.2-1.5-2.3-2.3c-0.9-0.6-1.6-1-2.1-1.3c-0.7-0.3-1.5-0.5-2.5-0.7c-1.5-0.3-2.8-0.4-3.8-0.3
c-1.9,0.3-3.1,0.5-3.5,0.6c-1.3,0.2-2.4,0.6-3.4,1c-1.7,0.8-2.8,1.3-3.2,1.6c-1.3,0.7-2.6,1.5-4.1,2.6c-1.5,1.1-2.6,2.2-3.5,3.3
c-0.3,0.4-0.9,1.2-1.7,2.3c-0.6,0.8-1.3,1.9-2.1,3.5c-1,1.7-1.7,3.3-2.1,4.6c-0.7,2.1-1.5,4.5-2.2,7.2c-0.1,0.5-0.3,1.5-0.6,3.2
c-0.2,1-0.4,0.4-0.5-1.7c-0.1-2.4-0.3-4.5-0.6-6.3c-0.3-1.6-0.7-3.4-1.3-5.4c-0.8-2.8-1.3-4.5-1.6-5c-0.7-1.6-1.8-3.2-3.3-4.9
c-1.6-1.7-3.2-3-4.8-3.8c-1.1-0.5-2.5-1-4.2-1.3C45,58,43.9,57.9,42.8,58c-0.9,0.1-1.3,0.2-1.4,0.2h-0.6c-3.3-2.5-5.5-4-6.7-4.6
c-1.1-0.5-1.9-0.9-2.5-1c-0.9-0.3-1.9-0.5-3-0.5c-2.4,0-4.2,0-5.4,0.2c-1.1,0.3-1.8,0.5-2.3,0.5c-0.9,0.2-1.6,0-2-0.4
c-0.7-0.6-1.5-1.1-2.5-1.6c-1.2-0.6-2.2-0.8-3-0.8c-1.4,0-2.4,0.2-3.2,0.4c-1.3,0.4-2.3,1.1-3.1,2.1C5.6,54.4,4.7,56.5,4.2,58.7z"
/>
<path d="M4.2,74.5c-0.2,0.6-0.3,1.3-0.4,2.2c-0.1,0.9-0.1,1.6,0.1,2.1c0.3,0.9,0.8,2.1,1.5,3.5
c0.8,1.5,1.7,2.7,2.5,3.5c1.2,1.3,2.4,2.4,3.6,3.4c2.1,1.6,3.9,2.7,5.2,3.3l2.6,1.3c1.2,0.6,2,0.9,2.5,1.1
c0.8,0.2,2.2,0.7,4.1,1.4c0.5,0.1,1.7,0.4,3.7,0.9c2.1,0.5,3.5,0.7,4.2,0.9c1.8,0.3,3.8,0.6,6.2,0.8l3.9,0.2L40.5,99
c-6.1-0.4-10.5-0.8-13.1-1.2c-2.5-0.5-5.6-1.3-9.3-2.6c-1.7-0.6-3.1-1-4.1-1.1c-1-0.1-1.3-0.1-1,0.2c0.7,0.8,3.9,1.8,9.6,3
c4.8,1,11.4,1.8,19.9,2.2c7.1,0.3,12.2,0.4,15.3,0.2l0.1,0.1c0,0.1-0.1,0.2-0.2,0.2h0.1l0.1,0.1h28c0,0,0,0-0.1-0.1h-0.1
c0.3-0.4,0.1-0.6-0.5-0.5c-0.3,0-0.8,0-1.5-0.1c-0.6-0.1-1-0.2-1.2-0.2l-1.7-0.3c-3-0.3-5.1-0.5-6.3-0.6c-1.6-0.1-2.5-0.1-2.7-0.1
c-1,0-1.7,0.1-2.2,0.3c-0.9,0.3-1.8,0.4-2.6,0.2c-0.4-0.1-0.6-0.2-0.7-0.4c-0.1-0.2,0.3-0.3,1.3-0.3c1.6,0,3-0.1,4.2-0.2
c2.3-0.1,3.8-0.2,4.2-0.3c0.7-0.2,3-0.8,7-1.7c2.9-0.7,4.9-1.4,6.2-2c1.2-0.6,2.1-1,2.8-1.3c1-0.5,1.7-0.9,2-1.2
c1.4-1.3,2.1-2.2,2.2-2.9c0.3-1.9,0.3-3,0.2-3.5c-0.2-0.5-0.2-0.9-0.2-1.1c0.1-0.3,0.5-0.6,1.1-0.9c0.7-0.3,1.3-0.7,1.9-1.3
c0.6-0.6,1-1.1,1.1-1.7c0.4-1.5,0.3-2.7-0.6-3.7c-0.4-0.4-1.2-0.9-2.3-1.4c-0.9-0.4-1.6-0.6-2.1-0.8c-0.7-0.2-1.5-0.3-2.5-0.4
c-1.5-0.2-2.8-0.2-3.8-0.2c-1.9,0.2-3.1,0.3-3.5,0.3c-1.3,0.1-2.4,0.3-3.4,0.6c-1.7,0.5-2.8,0.8-3.2,1c-1.3,0.4-2.6,1-4.1,1.6
c-1.5,0.7-2.6,1.3-3.5,2c-0.3,0.2-0.9,0.7-1.7,1.4c-0.6,0.5-1.3,1.2-2.1,2.1c-1,1.1-1.7,2-2.1,2.8c-0.7,1.3-1.5,2.8-2.2,4.4
c-0.1,0.3-0.3,0.9-0.6,1.9c-0.2,0.6-0.4,0.2-0.5-1c-0.1-1.5-0.3-2.8-0.6-3.9c-0.3-1-0.7-2.1-1.3-3.4c-0.8-1.7-1.3-2.8-1.6-3.1
c-0.7-1-1.8-2-3.3-3c-1.6-1.1-3.2-1.8-4.8-2.3c-1.1-0.3-2.5-0.6-4.2-0.8c-1.1-0.1-2.2-0.2-3.3-0.1c-0.9,0.1-1.3,0.1-1.4,0.1h-0.6
c-3.3-1.5-5.5-2.5-6.7-2.8c-1.1-0.3-1.9-0.5-2.5-0.6c-0.9-0.2-1.9-0.3-3-0.3c-2.4,0-4.2,0-5.4,0.1c-1.1,0.2-1.8,0.3-2.3,0.3
c-0.9,0.1-1.6,0-2-0.2c-0.7-0.4-1.5-0.7-2.5-1c-1.2-0.3-2.2-0.5-3-0.5c-1.4,0-2.4,0.1-3.2,0.2c-1.3,0.2-2.3,0.6-3.1,1.3
C5.6,71.9,4.7,73.2,4.2,74.5z"/>
</g>
</defs>
<text class="text" x="450" dy="40" width="80" height="20">保存为图片</text>
<rect id="saveImg" x="440" y="20" width="100" height="30" />
<text class="text" x="450" dy="80" width="80" height="20">增加画板</text>
<rect id="addASet" x="440" y="60" width="80" height="30" />
<rect id="colorblack" class="color" y="20" rx="5" ry="5" width="50" height="20" />
<rect id="colorwhite" class="color" y="20" rx="5" ry="5" width="50" height="20" />
<rect id="coloryellow" class="color" y="20" rx="5" ry="5" width="50" height="20" />
<rect id="colorblue" class="color" y="20" rx="5" ry="5" width="50" height="20" />
<rect id="colorred" class="color" y="20" rx="5" ry="5" width="50" height="20" />
<circle class="c1" cy="70" r="20" />
<circle class="c1" cy="70" r="20" />
<circle class="c1" cy="70" r="20" />
<circle class="c1" cy="70" r="20" />
<circle class="c1" cy="70" r="20" />
<circle class="c" cy="70" r="4" />
<circle class="c" cy="70" r="6" />
<circle class="c" cy="70" r="8" />
<circle class="c" cy="70" r="10" />
<circle class="c" cy="70" r="12" />
<use xlink:href="#Crayon" class="u" id="pencrayon" x="0" style="stroke:rgba(0,0,0,.4);" fill="url(#white)"></use>
<use xlink:href="#Pencil" class="u" id="penpencil" x="50" style="stroke:rgba(0,0,0,.4);" fill="url(#yellow)"></use>
<use xlink:href="#Paintbrush" class="u" id="penpaintbrush" x="100" style="stroke:rgba(0,0,0,.4)" fill="url(#blue)"></use>
<use xlink:href="#Nidepen" class="u" id="pennidepen" x="150" style="stroke:rgba(0,0,0,.4)" fill="url(#red)"></use>
<use xlink:href="#Eraser" class="u" id="peneraser" x="200" style="stroke:rgba(0,0,0,.4)" ></use>
<use xlink:href="#shape-butterfly" id="butterfly" x="300" y="-10" style="stroke:rgba(255,255,255,.4);"fill="rgba(255,255,255,.4)" ></use>
<animateTransform xlink:href="#butterfly" attributeName="transform" attributeType="XML" type="translate" begin="butterfly.click" dur="0.3s" fill="freeze" values="0;-5;50;30;38;" keyTimes="0;0.1;0.5; 0.9;1"
></animateTransform>
</svg>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/operate.js"></script>
</html>
标签： Canvas
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论