画板
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas width="500" height="500"id="canvas" >
<style>
*{padding:0;margin:0;}
body{background: #ccc;}
canvas{
background: #fff;margin: 50px 10px;
}
input{
display: inline-block;
width: 80px;height:30px;cursor: pointer;margin-left: 10px; }
</style>
</canvas>
<p>
<input type=" button" id="red" value="红画笔" />
<input type=" button" id="green" value="绿画笔" />
<input type=" button" id="blue" value="蓝画笔" />
<input type=" button" id="default" value="重置颜色" />
<input type=" button" id="clear" value="清除画布" />
</p>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var oInput=document.getElementsByTagName("input");
for(var i=0;i<oInput.length;i++){
oInput[i].onclick=function(){
var ID=this.getAttribute("id");
switch(ID){
case'red':
ctx.strokeStyle='red';
break;
case'green':
ctx.strokeStyle='green';
break;
case'blue':
ctx.strokeStyle='blue';
break;
case'default':
ctx.strokeStyle='black';
break;
case'clear':
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
break;
}
}
}
draw();
function draw(){
canvas.onmousedown=function(ev){
var ev =ev||event;
ctx.beginPath();
ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
document.onmousemove=function(ev){
var ev =ev||event;
ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
ctx.stroke();
}
document.onmouseup=function(ev){
document.onmousemove=document.onmouseup=null;
ctx.closePath();
}
}
}
}
</script>
</body>
</html>
相关阅读
近常常听到搞微商，微信项目的在叫苦，由于微信域名屏蔽，哀鸿遍野。微信官方在对微信中推广活动的第三方网页内容管控越来越严格，如果活
25行代码实现完整的RSA算法 python3.X版本的请点击这里25行代码实现完整的RSA算法 网络上很多关于RSA算法的原理介绍，但是
# encoding: utf-8 ''' #!/usr/bin/env python @author: yudian @contact: [email protected] @file: k_means.py @time: 2018/12
Svm（support Vector Mac）又称为支持向量机，是一种二分类的模型。当然如果进行修改之后也是可以用于多类别问题的分类。支持向量机可
#include <stdio.h>#include <string.h>//首先将摩斯电码的36个符号及其电码(1对应.，0对应-)记录在一个数组内char a[36][6] = { "