画布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(): ...
随机推荐
- v-touch使用方法以及在项目中遇到的问题
上篇博客中我记得还有一个坑没有解决好,在这篇博客中详细说明一下. 在 https://github.com/dreamITGirl/vuepageturn 我的这个代码库里,更新到2.1版本. 目前解 ...
- Ubuntu1804登录界面闪退
目前主力机操作系统已经由Ubuntu 16.04 lts升级到Ubuntu 18.04 lts.由于是跨版本升级过来,而且由unity(个人觉得挺好)替换成了gnome3,经常出点小问题.这次由于安装 ...
- 树状数组 二维偏序【洛谷P3431】 [POI2005]AUT-The Bus
P3431 [POI2005]AUT-The Bus Byte City 的街道形成了一个标准的棋盘网络 – 他们要么是北南走向要么就是西东走向. 北南走向的路口从 1 到 n编号, 西东走向的路从1 ...
- 树的遍历顺序 - dfs序|欧拉序|dfn序（备忘）
(仅作备忘) dfs序是dfs过程中对于某节点进入这个节点的子树和离开子树的顺序 满足每个节点都会在dfs序上出现恰好两次 任意子树的dfs序都是连续的 欧拉序是dfs过程中经过节点的顺序 每个节点至 ...
- luogu1210 回文检测
Manacher 正确读法:抹内A撤(马拉车) (跟着假硕学英语) 我们把原来的字符串,通过玄学处理,变成只留下字母,且每两个字母之间有一个奇怪的字符的那种Manacher专用字符串. 建立双射关系f ...
- linode出现以下报错
Linode Manager 报错 系统重新安装后 解决办法执行 rm -rf ~/.ssh/known_hosts 再继续执行:ssh root@72.14.189.163
- Solr学习笔记(4) —— SolrCloud的概述和搭建
一.概述 1.1 什么是SolrCloud Lucene是一个Java语言编写的利用倒排原理实现的文本检索类库: Solr是以Lucene为基础实现的文本检索应用服务.Solr部署方式有单机方式.多机 ...
- C#学习之按钮点击事件
描述:asp.net中服务器控件Button的点击事件OnClientClick和OnClick的区别? 解答:http://www.cnblogs.com/ypfnet/archive/2012/1 ...
- setlocal 本地变量详解
命令 setlocal (开启本地变量) endlocal (结束本地变量) 很多新手不理解这句话是什么意思,在批处理中有什么作用. 其实在批处理中 setlocal 作用很大,配合 endloca ...
- day25 网络编程之socket sc架构
1. 为什么要学习socket? socket就是网络通信的工具,任何一门语言都有socket,他不是任何一个语言的专有名词,而是大家通过自己的程序与其他电脑进行网络通信的时候都用它. 2. 客户 ...