<!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. GPIO接口解析【转】

    本文提供了一个linux下访问GPIO的约定的概述. 这些调用使用gpio_* 命名前缀.没有别的调用会使用这个前缀或是相关的__gpio_*前缀. 转自:http://blog.163.com/w5 ...

  2. Tengine HTTPS原理解析、实践与调试【转】

    本文邀请阿里云CDN HTTPS技术专家金九,分享Tengine的一些HTTPS实践经验.内容主要有四个方面:HTTPS趋势.HTTPS基础.HTTPS实践.HTTPS调试. 一.HTTPS趋势 这一 ...

  3. eclipse设置代码模板和格式

    该设置可以在保存文件时自动根据模板调整代码格式. 首先准备华为代码格式化文件: FEFO-Formatter.xml FEFO-codetemplates.xml 设置格式Preferences-Ja ...

  4. (网络编程)socketserver模块服务端实现并发

    基于tcp的套接字(实现并发),关键就是两个循环,一个链接循环,一个通信循环 基于udp的套接字(不是正真意义上的并发,实现真并发) socketserver模块中分两大类:server类(解决链接问 ...

  5. lvs基本概念、调度方法、ipvsadm命令及nat模型示例

    LVS类型: NAT:-->(DNAT) DR TUN FULLNAT LVS的常见名词解释 CIP<-->VIP--DIP<-->RIP Direct Routing: ...

  6. Springboot分模块开发详解(1)：建立父工程

    基础服务,见下: base是父工程,base-entity是实体层,base-dao是DAO层,base-service是业务层,base-controller是WEB控制器层,base-web是页面 ...

  7. annoy ANN算法 调参

    search_k serach_k越大,越准确,但是要在时间和准确率之间取个trade off During the query it will inspect up to search_k node ...

  8. Math对象应用详解

    JavaScript中的Math对象提供了大量的算术运算功能和数值操作方法. JavaScript中的Math对象的与众不同之处在于,它是一个全局对象.在使用Math对象之前,既不需要将一个变量声明为 ...

  9. pyhon----模块导入

    正常情况 报错(两个导入都报错)

  10. poj3579 二分套二分

    和poj3685类似,都是二分答案然后在判断时再二分 这题的内层二分可以用stl代替 /* 二分套二分,思路:升序排序数据,先二分答案x进行判断,判断时枚举每个元素,二分找到和其之差小于等于x的所有值 ...