<!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. Class create, device create, device create file【转】

    来自:http://www.hovercool.com/en/Class_create,_device_create,_device_create_file 开始写Linux设备驱动程序的时候,很多时 ...

  2. 汇编语言转换成c语言，或者汇编语言转换成golang的汇编，c语言转换成golang的方法

    https://github.com/minio/c2goasm http://microapl.com/asm2c/index.html               收费的 https://gith ...

  3. mysql系列二、mysql内部执行过程

    向MySQL发送一个请求的时候,MySQL到底做了什么 客户端发送一条查询给服务器. 服务器先检查查询缓存,如果命中了缓存,则立刻返回存储在缓存中的结果.否则进入下一阶段. 服务器端进行SQL解析.预 ...

  4. Ex 3_17 无穷路径..._十一次作业

    (a) Inf(p)在p中出现了无穷多次,说明Inf(p)存在一个环当中,所以这个环的顶点肯定是某一个强连通部件的子集. (b) 若G中存在一条无穷路径,则G中至少存在一个环,且这个环至少有两个顶点, ...

  5. 解决maven编译Java中的使用了未经检查或不安全的操作

    eclipse编译器找到右侧黄色点击可以定位到对应代码块位置 解决方法:鼠标悬浮在上方点击add即可 @SuppressWarnings("unchecked");给出的解决方案 ...

  6. MSF初体验—入侵安卓手机

    1.生成apk程序 msfvenom -p android/meterpreter/reverse_tcp LHOST=192.168.1.101 LPORT=5555 R > apk.apk ...

  7. 在vscode成功配置Python环境

    注意:如果您希望在Visual Studio Code中开始使用Python,请参阅教程.本文仅关注设置Python解释器/环境的各个方面. Python中的“环境”是Python程序运行的上下文.环 ...

  8. Jmeter接口测试参数化实例图文示例

    在实际测试中,不可能查询值测试一个输入值,还有其他测试数据,故引入参数化的概念,让一条用例循环执行,直到所有测试数据均测试完成,如下示例: Jmeter参数化有4种方法,本例仅介绍最普遍及简单的1个方 ...

  9. SeaJS入门教程系列之完整示例（三）

    一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.j ...

  10. 最近关于mysql的造型，binlog使用，以及阿里云上线数据处理错误导致被处罚的思考

    因团队中成员,上线代码时,不小心将数据表中吃掉物理的数据清空,导致被单位处罚,痛定思痛,我们应该如何上线,还需要准备哪些技能? 1.上线时,必须关闭服务,不能一边上线,一边让用户可以继续操作,一边产生 ...