<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<canvas id="one" width="800px" height="500px" style="border:1px solid pink;"></canvas>
<input type="color" id="ys" />
<button id="ccc">橡皮擦</button>
<button id="bbb">画笔</button>
<button id="eee">矩形</button>
</body>
<script type="text/javascript">
//获取画布id
var a = document.getElementById("one");
var b = a.getContext("2d");
bbb.onclick = function(){
a.onmousedown = function(e) {
var e = e || event;
//绘制开始路径
b.beginPath();
//绘制起始点坐标
b.moveTo(e.clientX,e.clientY);
//获取颜色
b.strokeStyle = ys.value;
a.onmousemove = function(e){
var e = e || event;
//设置结束点坐标
b.lineTo(e.clientX,e.clientY);
//对路径进行描边
b.stroke();
}
}
a.onmouseup = function(){
a.onmousemove = null;
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
