<!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. ARMV8 datasheet学习笔记3：AArch64应用级体系结构之Atomicity

    1.前言 Atomicity是内存访问的一个属性,描述为原子性访问,包括single-copy atomicity和multi-copy atomicity 2.基本概念 observer 可以发起对 ...

  2. Simulink--MATLAB中的一种可视化仿真工具

     Simulink是MATLAB中的一种可视化仿真工具, 是一种基于MATLAB的框图设计环境,是实现动态系统建模.仿真和分析的一个软件包,被广泛应用于线性系统.非线性系统.数字控制及数字信号处理的建 ...

  3. Hacker需要掌握的基础

    编译语言:1.C语言能力要求:精通选用教材:<C Primer Plus 中文版(第5版)>其他教材:<标准C程序设计(第3版)><C语言入门经典(原书第3版)>补 ...

  4. python之抽象基类

    抽象基类特点 1.不能够实例化 2.在这个基础的类中设定一些抽象的方法,所有继承这个抽象基类的类必须覆盖这个抽象基类里面的方法 思考 既然python中有鸭子类型,为什么还要使用抽象基类? 一是我们在 ...

  5. 性能测试二十三：环境部署之Redis安装和配置

    redis:非关系型数据库,内存数据库,no-sql典型,   数据存放在内存中,一断电或者关闭就没有了 mysql.oracle.sqlserver···是关系型数据库,数据存放在磁盘中 一个Red ...

  6. python+selenium四：iframe查看、定位、切换

    iframe是HTML里面嵌套HTML的一种框架 1.查看iframe 1.Top Window:可直接定位 2.iframe#i:说明此元素在iframe上 3.iframe显示为空:(id或nam ...

  7. Linux下配置自动更新时间

    1,修正本地时区及ntp服务 [root@VM_0_13_centos ~]# yum -y install ntp [root@VM_0_13_centos ~]# rm -rf /etc/loca ...

  8. Memcached和Redis

    作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ Memcached和Redis ...

  9. C 几何水题 求不同斜率的数目 枚举+set

    Description Master LU 非常喜欢数学,现在有个问题:在二维空间上一共有n个点,LU每连接两个点,就会确定一条直线,对应有一个斜率.现在LU把平面内所有点中任意两点连线,得到的斜率放 ...

  10. 这篇文章讲得精彩-深入理解 Python 异步编程(上)！

    可惜,二和三现在还没有出来~ ~~~~~~~~~~~~~~~~~~~~~~~~~ http://python.jobbole.com/88291/ ~~~~~~~~~~~~~~~~~~~~~~~~~~ ...