<!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. linux内核中链表代码分析---list.h头文件分析（一）【转】

    转自:http://blog.chinaunix.net/uid-30254565-id-5637596.html linux内核中链表代码分析---list.h头文件分析(一) 16年2月27日17 ...

  2. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  3. 802.11 af 要点

    (1)TVWS工作在 VHF/UHF 频段,欧洲为 470-790MHZ, 美国为 54-698MHZ. (2)GDB(Geolocation Database):地理位置数据库,与其他802.11协 ...

  4. CentOS 6.5环境使用ansible剧本自动化部署Corosync + pacemaker环境及corosync常用配置详解

    环境说明: 192.168.8.39 node2.chinasoft.com 192.168.8.42 node4.chinasoft.com 192.168.8.40 ansible管理服务器 19 ...

  5. 100以内奇偶数（for循环）

  6. 目标检测的图像特征提取之（一）HOG特征（转）

    看过很多介绍HOG的博文,讲的最清楚的是这位博主:http://blog.csdn.net/zouxy09/article/details/7929348 代码如下: #include <ope ...

  7. 关于引用外部类要用static 的问题

    一.直接用 static 引用 import static net.mindview.util.Print.*; //net...为引用的类,此方法在程序加载时就已实例化 二. 也可以手动在需要时实例 ...

  8. poj2185 kmp求最小覆盖矩阵，好题！

    /* 特征值k=m-next[m]就是最小循环节的长度, m%k就是去末尾遗留长度 */ #include<iostream> #include<cstring> #inclu ...

  9. 性能测试十一：jmeter进阶之java请求

    使用Java编写JDBC脚本对Mysql进行增删改查等操作的性能测试 使用Jmeter提供的脚本框架依赖的jar包(分别在jmeter目录下的lib和ext目录下) ApacheJMeter_core ...

  10. Myeclipse调试模式下自动提示变量值设置

    1.Window->Preferences->Java->Editor->Hovers 将[Variable Values]选择即可,如果第一个[Combined Hover] ...