原生js制作写字板
2018-03-23 00:10
253 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cans{
display: block;
margin: 0 auto;
}
#selectColor{
margin: 0 auto;
width: 400px;
/* height: 50px;*/
text-align: center;
margin-top: 10px;
list-style: none;
}
.all{
/*width: 10%;
height: 95%;*/
width: 60px;
height: 50px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 10px;
border-radius:6px ;
cursor: pointer;
}
#red{
background-color: red;
}
#yellow{
background: yellow;
}
#black{
background: black;
}
#green{
background: green;
}
#blue{
background: #0000FF;
}
#clear{
margin-left: 10px;
}
#fontW{
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="cans">
您的浏览器不支持该功能！
</canvas>
<ul id="selectColor">
<li class="all" id="red" onclick="changecolor('red'),ss(this)"></li>
<li class="all" id="yellow" onclick="changecolor('yellow'),ss(this)"></li>
<li class="all" id="black" onclick="changecolor('black'),ss(this)"></li>
<li class="all" id="green" onclick="changecolor('green'),ss(this)"></li>
<li class="all" id="blue" onclick="changecolor('blue'),ss(this)"></li>
</ul></br>
<input id="clear" type="button" value="重画"> <!--<onclick="clears()">-->
</br></br>
<div id="fontW">
<strong>线条粗细：</strong>0<input type="range" id="ranges" min="0" max="20" onchange="changeW()" value="3"/>20
</div>
<script type="text/javascript">
//初始化区
var ranges=document.getElementById("ranges");
var cans=document.getElementById("cans");
var clear=document.getElementById("clear");
cans.width=600;
cans.height=600;
var down=false;
var up=false;
var clears1=false;
var lastmousePos={x:0,y:0};
var curmousePos={x:0,y:0};
var lastWidth;
var curWidth=3;
//设置canvas宽高
var CanvasWidth=cans.width;
var CanvasHeight=cans.height;
var half_width=CanvasWidth/2;
var half_height=CanvasHeight/2;
var frameW=10;
var lineW=1;
//改变线条宽度
function changeW(){
curWidth=ranges.value;
}
var drawCol="black";
//改变字体颜色
function changecolor(s){
drawCol=s;
}
var cts=cans.getContext("2d");
//设置米字格子
//开始绘制前设置基本样式
drawcanvs()
function drawcanvs(){
cts.lineCap="round"
cts.lineJoin="round"
cts.lineWidth=frameW;
cts.strokeStyle="red"
cts.beginPath()
cts.moveTo(0,0);
cts.lineTo(CanvasWidth,0);
cts.lineTo(CanvasWidth,CanvasHeight);
cts.lineTo(0,CanvasHeight);
cts.closePath()
cts.stroke()
//画x
cts.lineWidth=lineW;
cts.beginPath()
cts.moveTo(0,0);
cts.lineTo(CanvasWidth,CanvasHeight);
cts.closePath()
cts.stroke()
cts.beginPath()
cts.moveTo(CanvasWidth,0);
cts.lineTo(0,CanvasHeight);
cts.closePath()
cts.stroke()
cts.beginPath()
cts.moveTo(half_width,0);
cts.lineTo(half_width,CanvasHeight);
cts.closePath()
cts.stroke()
cts.beginPath()
cts.moveTo(0,half_height);
cts.lineTo(CanvasWidth,half_height);
cts.closePath()
cts.stroke()
}
cans.onmousemove=function(e){
var e=e||event;
var clx=e.clientX-cans.getBoundingClientRect().left;//将鼠标原点化为画布原点
var cly=e.clientY-cans.getBoundingClientRect().top;
curmousePos={x:clx,y:cly};
if(down){
//开始画
//设置画笔颜色、粗细等
cts.lineCap="round"
cts.lineJoin="round"
cts.lineWidth=curWidth;
cts.strokeStyle=drawCol;
//开始绘画
cts.save();
cts.beginPath();
cts.moveTo(lastmousePos.x,lastmousePos.y);
cts.lineTo(curmousePos.x,curmousePos.y);
cts.closePath();
cts.stroke();
cts.restore();
lastmousePos=curmousePos;
}
if(up){
down=false;
up=false;
}
}
//鼠标按下事件
cans.onmousedown=function(e){
var e=e||event;
e.preventDefault();
lastmousePos=curmousePos
down=true;
}
//鼠标松开事件
cans.onmouseup=function(e){
var e=e||event;
e.preventDefault();
up=true;
}
//计算速度
// function calV(s,t){
// var v=s/t;
// if(v<0.1){
// curWidth=10;
// }else if(v>10){
// curWidth=2;
// }else{
// curWidth=5
// }
// }
function changeBg(){
var all=document.getElementsByClassName("all");
for(var i=0;i<all.length;i++){
all[i].onmouseover=function(){
this.style.cssText="margin-top:-6px;box-shadow:3px 5px 5px black"
}
all[i].onmouseout=function(){
this.style.cssText="border: 1px solid #CCCCCC;"
}
}
}
changeBg()
//恢复原状
function ss(s){
s.style.cssText="margin-top:0px;box-shadow:none;"
}
//清除方法
clear.onmousedown=function (){
cts.clearRect(0,0,cans.width,cans.height);
// clears1=true;
}
//清除后重画
clear.onmouseup=function(){
drawcanvs();
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cans{
display: block;
margin: 0 auto;
}
#selectColor{
margin: 0 auto;
width: 400px;
/* height: 50px;*/
text-align: center;
margin-top: 10px;
list-style: none;
}
.all{
/*width: 10%;
height: 95%;*/
width: 60px;
height: 50px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 10px;
border-radius:6px ;
cursor: pointer;
}
#red{
background-color: red;
}
#yellow{
background: yellow;
}
#black{
background: black;
}
#green{
background: green;
}
#blue{
background: #0000FF;
}
#clear{
margin-left: 10px;
}
#fontW{
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="cans">
您的浏览器不支持该功能！
</canvas>
<ul id="selectColor">
<li class="all" id="red" onclick="changecolor('red'),ss(this)"></li>
<li class="all" id="yellow" onclick="changecolor('yellow'),ss(this)"></li>
<li class="all" id="black" onclick="changecolor('black'),ss(this)"></li>
<li class="all" id="green" onclick="changecolor('green'),ss(this)"></li>
<li class="all" id="blue" onclick="changecolor('blue'),ss(this)"></li>
</ul></br>
<input id="clear" type="button" value="重画"> <!--<onclick="clears()">-->
</br></br>
<div id="fontW">
<strong>线条粗细：</strong>0<input type="range" id="ranges" min="0" max="20" onchange="changeW()" value="3"/>20
</div>
<script type="text/javascript">
//初始化区
var ranges=document.getElementById("ranges");
var cans=document.getElementById("cans");
var clear=document.getElementById("clear");
cans.width=600;
cans.height=600;
var down=false;
var up=false;
var clears1=false;
var lastmousePos={x:0,y:0};
var curmousePos={x:0,y:0};
var lastWidth;
var curWidth=3;
//设置canvas宽高
var CanvasWidth=cans.width;
var CanvasHeight=cans.height;
var half_width=CanvasWidth/2;
var half_height=CanvasHeight/2;
var frameW=10;
var lineW=1;
//改变线条宽度
function changeW(){
curWidth=ranges.value;
}
var drawCol="black";
//改变字体颜色
function changecolor(s){
drawCol=s;
}
var cts=cans.getContext("2d");
//设置米字格子
//开始绘制前设置基本样式
drawcanvs()
function drawcanvs(){
cts.lineCap="round"
cts.lineJoin="round"
cts.lineWidth=frameW;
cts.strokeStyle="red"
cts.beginPath()
cts.moveTo(0,0);
cts.lineTo(CanvasWidth,0);
cts.lineTo(CanvasWidth,CanvasHeight);
cts.lineTo(0,CanvasHeight);
cts.closePath()
cts.stroke()
//画x
cts.lineWidth=lineW;
cts.beginPath()
cts.moveTo(0,0);
cts.lineTo(CanvasWidth,CanvasHeight);
cts.closePath()
cts.stroke()
cts.beginPath()
cts.moveTo(CanvasWidth,0);
cts.lineTo(0,CanvasHeight);
cts.closePath()
cts.stroke()
cts.beginPath()
cts.moveTo(half_width,0);
cts.lineTo(half_width,CanvasHeight);
cts.closePath()
cts.stroke()
cts.beginPath()
cts.moveTo(0,half_height);
cts.lineTo(CanvasWidth,half_height);
cts.closePath()
cts.stroke()
}
cans.onmousemove=function(e){
var e=e||event;
var clx=e.clientX-cans.getBoundingClientRect().left;//将鼠标原点化为画布原点
var cly=e.clientY-cans.getBoundingClientRect().top;
curmousePos={x:clx,y:cly};
if(down){
//开始画
//设置画笔颜色、粗细等
cts.lineCap="round"
cts.lineJoin="round"
cts.lineWidth=curWidth;
cts.strokeStyle=drawCol;
//开始绘画
cts.save();
cts.beginPath();
cts.moveTo(lastmousePos.x,lastmousePos.y);
cts.lineTo(curmousePos.x,curmousePos.y);
cts.closePath();
cts.stroke();
cts.restore();
lastmousePos=curmousePos;
}
if(up){
down=false;
up=false;
}
}
//鼠标按下事件
cans.onmousedown=function(e){
var e=e||event;
e.preventDefault();
lastmousePos=curmousePos
down=true;
}
//鼠标松开事件
cans.onmouseup=function(e){
var e=e||event;
e.preventDefault();
up=true;
}
//计算速度
// function calV(s,t){
// var v=s/t;
// if(v<0.1){
// curWidth=10;
// }else if(v>10){
// curWidth=2;
// }else{
// curWidth=5
// }
// }
function changeBg(){
var all=document.getElementsByClassName("all");
for(var i=0;i<all.length;i++){
all[i].onmouseover=function(){
this.style.cssText="margin-top:-6px;box-shadow:3px 5px 5px black"
}
all[i].onmouseout=function(){
this.style.cssText="border: 1px solid #CCCCCC;"
}
}
}
changeBg()
//恢复原状
function ss(s){
s.style.cssText="margin-top:0px;box-shadow:none;"
}
//清除方法
clear.onmousedown=function (){
cts.clearRect(0,0,cans.width,cans.height);
// clears1=true;
}
//清除后重画
clear.onmouseup=function(){
drawcanvs();
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js制作简单的数字键盘
- css+js 原生滑动条制作
- 原生js制作日历控件实例分享
- 原生js万年历Calendar制作（date对象的运用）
- 原生Js基于HTML5 FileReader&canvas制作的banner广告图片插件
- 用原生js制作一个动态简历(多动症简历)及在线预览部署过程
- 原生js制作读心术小游戏
- 通过原生JS和CSS制作钟表
- 原生JS+HTML5实现的可调节写字板功能示例
- 原生js制作弹出框
- 使用原生js制作轮播图
- 原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏
- 原生js结合html5制作小飞龙的简易跳球
- 原生JS制作贪吃蛇小游戏
- 原生js配合cookie制作保存路径的拖拽
- 原生js结合html5制作简易的双色子游戏
- 用原生js制作轮播图，以及关于position的简单归纳
- 使用 原生js 制作插件 (javaScript音乐播放器)
- 原生js制作虚拟键盘
- 原生JS-jQuery : HTML 操作