画布canvas签名
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controller">
<div id="dclear"><a href="javascript:;" id="btnclear">清除</a></div>
<div id="dcolors">
<div class="dcolor dblack" data-color="black"></div>
<div class="dcolor dred" data-color="red" ></div>
<div class="dcolor dgreen" data-color="green"></div>
<div class="dcolor dblue" data-color="blue"></div>
<div class="dcolor dpink" data-color="pink" ></div>
</div>
</div>
</body>
</html>
*{
padding:0px;
margin:0px;
}
#canvas{
margin:0 auto;
display:block;
}
#controller{
margin:0 auto;
width:400px;
height:400px;
margin-top:10px;
}
#dclear{
float:right;
}
.dcolor{
float:left;
width:40px;
height:40px;
margin-right:5px;
}
.dblack{
background-color:black;
}
.dred{
background-color:red;
}
.dgreen{
background-color:green;
}
.dblue{
background-color:blue;
}
.dpink{
background-color:pink;
}
.sel{
border:solid 4px #b312f3;
}
/// <reference path="jquery-1.10.2.min.js" /> var canvasWidth, canvasHight, canvas, context;
var isMouseDown = false;
var LastLoc = { x: 0, y: 0 };
var scolor = "black";
function windowToCanvas(x, y)//x,,y为距离屏幕的距离
{
var bbox = canvas.getBoundingClientRect();//canvas距离屏幕的距离
return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };//获取距离canvas的距离
}
onload = function () {
canvasWidth = 400;
canvasHight = 400;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
drawGrid(); canvas.onmousedown = function (e) {//鼠标放下
e.preventDefault();//取消事件的默认动作
isMouseDown = true;
LastLoc = windowToCanvas(e.clientX, e.clientY);
} canvas.onmouseup = function (e) {//鼠标按起
e.preventDefault();
isMouseDown = false;
} canvas.onmouseout = function (e) {//出了画布
e.preventDefault();
isMouseDown = false;
} canvas.onmousemove = function (e) {//鼠标移动
e.preventDefault();
if (isMouseDown) {
var curloc = windowToCanvas(e.clientX, e.clientY);
context.beginPath();
context.moveTo(LastLoc.x, LastLoc.y);
context.lineTo(curloc.x, curloc.y);
context.strokeStyle = scolor;
context.lineWidth = 20;
context.lineCap = "round";//帽子
context.lineJoin = "round";
context.stroke();
LastLoc = curloc;
}
} $("#btnclear").click(function () {
context.clearRect(0, 0, canvasWidth, canvasHight);
drawGrid();
});
$(".dcolor").click(function () {
$("this").addClass("sel").siblings().removeClass("sel");
scolor = $(this).attr("data-color");
});
}
function drawGrid() {
canvas.width = canvasWidth;
canvas.height = canvasHight;
context.strokeStyle = "#f00";
context.beginPath();
context.moveTo(3, 3);
context.lineTo(canvasWidth - 3, 3);
context.lineTo(canvasWidth - 3, canvasHight - 3);
context.lineTo(3, canvasWidth - 3);
context.closePath();
context.lineWidth = 6;//线的粗细
context.stroke(); context.beginPath();
context.moveTo(0, 0);
context.lineTo(canvasWidth, canvasHight); context.moveTo(canvasWidth, 0);
context.lineTo(0, canvasHight); context.moveTo(canvasWidth / 2, 0);
context.lineTo(canvasWidth / 2, canvasHight); context.moveTo(0, canvasHight / 2);
context.lineTo(canvasWidth, canvasHight / 2);
context.lineWidth = 1;
context.stroke();
}
画布canvas签名的更多相关文章
- PHP《将画布(canvas)图像保存成本地图片的方法》
用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...
- HTML 5 画布(canvas)
canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力. canvas 是一个矩形区域,可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的 ...
- HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- Tkinter画布-Canvas
Python - Tkinter画布-Canvas: Canvas是一个长方形的面积,图画或其他复杂的布局.可以放置在画布上的图形,文字,部件,或是帧 Canvas是一个长方形的面积,图画或其他复杂的 ...
- 转载：将画布(canvas)图像保存成本地图片的方法
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...
- 面向画布(Canvas)的JavaScript库
面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择 学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...
- 学习前端第二天心得体会（初步了解HTML5的部分API以及画布Canvas）
一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素. document. ...
- java 图形化小工具Abstract Window Toolit ：画笔Graphics，画布Canvas()，弹球小游戏
画笔Graphics Java中提供了Graphics类,他是一个抽象的画笔,可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图. Graphics常用的画图方法如下: drawLine(): ...
随机推荐
- 前端开发快速定位bug的一些小技巧
1,根据报错信息定位: (1) Uncaught TypeError: Cannot read property 'attr' of undefined; 此类型为变量或者对象属性未定义类型. (2) ...
- P3943 星空 区间异或差分
\(\color{#0066ff}{ 题目描述 }\) 逃不掉的那一天还是来了,小 F 看着夜空发呆. 天上空荡荡的,没有一颗星星--大概是因为天上吹不散的乌云吧. 心里吹不散的乌云,就让它在那里吧, ...
- 树链剖分【洛谷P4114】 Qtree1
P4114 Qtree1 题目描述 给定一棵n个节点的树,有两个操作: CHANGE i ti 把第i条边的边权变成ti QUERY a b 输出从a到b的路径中最大的边权,当a=b的时候,输出0 码 ...
- 【三支火把】--- 关于UEFI&PCD的总结介绍
1个人理解 个人理解PCD基本等同于Token,应当算是一种描述性语言,按照规定书写好PCD的配置档,在编译的过程中,会根据你的配置生成同等含义的C文档,而在C文档中对应会出现相应的define或者变 ...
- 本地命令上传文件到服务器以及linux编辑过程中非正常退出问题
一.上传文件到linux服务器首先从你本地切换到你要上传文件的目录,接下来:scp 文件名字 服务器用户名字@服务器ip:存储路径例子:scp index.html root@106.75.229 ...
- .net mvc 框架实现后台管理系统 2
layui 数据表格 返回格式: var json = new { code = 0, count = pagers.totalRows, msg = "", data =null ...
- pytorch批训练数据构造
这是对莫凡python的学习笔记. 1.创建数据 import torch import torch.utils.data as Data BATCH_SIZE = 8 x = torch.linsp ...
- How to pass multiple parameters in PowerShell invoke-restmethod
Link: http://www.tagwith.com/question_322855_how-to-pass-parameters-in-powershell-invoke-restmethod- ...
- C语言之对指针概念的初步探究
指针?什么是指针? 指针(pointer)是一个值为内存地址的变量(或数据对象). 接下来从变量的角度分析: 变量有两个属性,一个是地址,一个是值. 指针与普通变量的不同之处在于:指针变量的值是一个内 ...
- python 多线程概念
######多线程##### 什么是线程: 线程是操作系统能够进行运算调度的最小单位(程序执行流的最小单元).它被包含在进程之中,是进程中的实际运作单位. 一个进程中可以并发多个线程,每条线程并行执行 ...