<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="console"></div>
<canvas id="canvas" width="960" height="400"></canvas>

<button onclick="exportImg(this)">导出图片</button>
线宽:
<select id="lineWidth" style="padding:6px;">
<option>1</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>8</option>
<option>10</option>
<option>12</option>
<option>16</option>
</select>
线颜色
<select id="lineColor" style="padding:6px;">
<option>red</option>
<option>yellow</option>
<option>blue</option>
<option>white</option>
</select>
<img src="" id="target" width="480" height="200"/>

</select>
<script type="text/javascript">
/**
技术：画板
技术点：html5 -canvas
开始工具：editplus+浏览器
步骤:
canvas/svg--flash
1:定义个canvas元素
2:画线
3:导出图片
*/
//获取画布对象
var canvaDom = document.getElementById("canvas");
//初始化画板的上下文
var context = canvaDom.getContext("2d");
//初始化画布的背景色
context.fillStyle = "black";
//画板的范围
//context.fillRect(x,y,width.height);
context.fillRect(0,0,960,400);
//添加鼠标事件
//a:鼠标按下去的事件
canvaDom.addEventListener("mousedown",down,false);
//b:鼠标移动事件
canvaDom.addEventListener("mousemove",draw,false);
//c:鼠标松开事件
canvaDom.addEventListener("mouseup",up,false);

//锁定开关
//event是javascript为每一个事件提供一个顶级类
var onoff = false;
var oldx = -10;
var oldy = -10;
var lineWidth = 1;
var lineColor = "red";
function down(event){
lienWidth = document.getElementById("lineWidth").value;
lineColor = document.getElementById("lineColor").value;
onoff = true;//锁定
//获取当前鼠标在画板中点击的x,y轴的坐标
oldx = event.clientX-10;
oldy = event.clientY-10;
document.getElementById("console").innerHTML = "x:="+oldx+";y:="+oldy;
}

//移动
function draw(event){
if(onoff){//开关
var newx = event.clientX-10;
var newy = event.clientY-10;
//核心---画线
context.beginPath();
//线的起始点坐标
context.moveTo(oldx,oldy);
context.lineTo(newx,newy);
//线的宽度
context.lineWidth = lienWidth;
//线的粗细(形状)
context.lineCap ="round";
//线的颜色
context.strokeStyle=getRandomColor();
//初始化到画布中
context.stroke();

oldx = newx;
oldy = newy;
}
}

function up(){
onoff = false;
}

/**/
function getRandomColor() {
return '#' + (function(h) {
return new Array(7 - h.length).join("0") + h;
})((Math.random() * 0x1000000 << 0).toString(16));
};

//导出图片
function exportImg(){
//初始画板的图片信息
var exportImg = canvas.toDataURL("image/png");
document.getElementById("target").src = exportImg;
}
</script>
</body>
</html>

js签名的更多相关文章

  1. 基于weixin-java-mp 做微信JS签名 invalid signature签名错误 官方说明

    微信JS签名详情请见:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang= ...

  2. vs2017 cordova js 签名配置

    在build.json文件中添加如下 { "android": { "release": { "keystore": "C:\\D ...

  3. 微信JS-SDK]微信公众号JS开发之卡券领取功能详解

    js sdk: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.952-.E6 ...

  4. 微信JS支付代码_前端调用微信支付接口

    转自:http://dditblog.com/itshare_553.html 跟大家分享一段微信支付的js代码片段.V3版的微信支付没有paySignKey参数.基本上是直接复制就可以使用了.改一改 ...

  5. 微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决

    今天偶然的把微信jssdk的debug打开后,发现调试信息总是提示签名错误,感情前两天api的"偶尔"不生效,不是因为还没执行代码,而是因为签名没正确啊!,这就是个100%可以重现 ...

  6. .Net 微信开发与微信支付

    .NET     https://github.com/JeffreySu/WeiXinMPSDK JAVA   http://git.oschina.net/pyinjava/fastweixin ...

  7. erp前端项目总结

    目录 一.项目目录(vue-cli2) 二.开发实践 (一) 权限 (二) 各组件间传递数据 (四) 路由 (七) 组织部门业务员三级联动 (八) 优化性能,手动绑定下拉框数据 (九) 验证 (十) ...

  8. Spring Batch @SpringBatchTest 注解

    Spring Batch 提供了一些非常有用的工具类(例如 JobLauncherTestUtils 和 JobRepositoryTestUtils)和测试执行监听器(StepScopeTestEx ...

  9. 微信支付java开发

    微信公众平台 (此处只讲pay) 微信商户平台,公众号的后台管理工具,包含公众号的商户信息,公众号支付,扫码支付,刷卡支付 1.商户信息包含商户号,和此公众平台关联的商户号,需登录商户平台设置商户秘钥 ...

随机推荐

  1. ubuntu 里切换 gcc，g++ 的版本

    https://askubuntu.com/questions/26498/choose-gcc-and-g-version https://stackoverflow.com/questions/7 ...

  2. ansible报错Using a SSH password instead of a key is not possible because Host Key checking is enabled and sshpass does not support this

    安装和配置好ansible,执行命令时报错如下 [root@test01 ansible-install]# ansible test -m shell -a 'w' >> Using a ...

  3. python计算最大公约数和最小公倍数

    a=4 b=2 def gcd(a,b): return a if b==0 else gcd(b,a%b) def lcm(a,b): return a*b//gcd(a,b) print(gcd( ...

  4. 去除Many2one字段的“创建并编辑”选项

    要去除Many2one字段的“创建并编辑”选项,只要在view.xml里对应的field定义里增加options="{'no_create_edit':1}即可 <field name ...

  5. jquery之data()

    $("#test").data("myProp","123") alert($("#test").data(" ...

  6. JS的浅拷贝与深拷贝

    浅拷贝 //这样的拷贝有一个问题.那就是,如果父对象的属性等于数组或另一个对象,//那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能. function exten ...

  7. Unicode转义序列

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. Javascipt 定义了一种特殊序列,使用6位ASCII字符代表任意16Unicode内码.这些Unicode转义序列均以 ...

  8. 常见的MySQL Replication Error

    现在不少公司都在用MySQL(master)-->MySQL(slave)的框架,当然也有一主多从的架构,这也是MySQL主从的一个延伸架构;当然也有的公司MySQL主主的架构,MySQL主主架 ...

  9. ubuntu 12.04 安装 openssh-server 失败，请问怎么该弄？

    $ sudo apt-get install openssh-server Reading package lists... Done Building dependency tree Reading ...

  10. JDK1.7+Tomcat6.0+MyEclipse8.6在win7下的安装与配置

    http://wenku.baidu.com/view/4f0bef02192e45361066f548.html