Canvas入门笔记-实现极简画笔
今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8
在学习过后自己写了一个简单的扩展
实现画板画笔功能,效果如下:
<div>
<!--画板-->
<canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>
<!--保存并显示鼠标X轴位置-->
<label id="lab_X"></label>
<!--保存并显示鼠标Y轴位置-->
<label id="lab_Y"></label>
</div>
$(function () {
var canvas = document.getElementById("box1");
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//标记开始书写
var start = false;
$(canvas).mousemove(function (event) {
//显示当前鼠标位置
$("#lab_X").text(event.pageX);
$("#lab_Y").text(event.pageY);
if (start) {
context.lineTo(event.pageX, event.pageY);
context.stroke();
}
});
//鼠标按下,开始书写
$(canvas).mousedown(function () {
context.beginPath();
context.moveTo($("#lab_X").text(), $("#lab_Y").text());
start = true;
});
//鼠标抬起,结束书写
$(canvas).mouseup(function () { start = false;
context.closePath();
});
});
Canvas入门笔记-实现极简画笔的更多相关文章
- canvas入门笔记
1.Canvas的使用注意 A.要在页面中添加一对canvas标记,默认占300*150的区域 B.我们可以通过html属性‘width’,‘height’来设置canvas的宽高,不可以通过cs ...
- Git 极简入门教程学习笔记
Git 极简入门教程 http://rogerdudler.github.io/git-guide/index.zh.html 测试用 https://github.com/xxx/BrnShop. ...
- MongoDB 极简实践入门
原作者StevenSLXie; 原链接(https://github.com/StevenSLXie/Tutorials-for-Web-Developers/blob/master/MongoDB% ...
- 我的第一个 Rails 站点:极简优雅的笔记工具-Raysnote
出于公司开发需求,这个暑假我開始搞Ruby on Rails.在业余时间捣鼓了一个在线笔记应用:http://raysnote.com.这是一个极简而优雅的笔记站点(至少我个人这么觉得的). 笔记支持 ...
- Underscore源码阅读极简版入门
看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...
- 《统计学习方法》极简笔记P5:决策树公式推导
<统计学习方法>极简笔记P2:感知机数学推导 <统计学习方法>极简笔记P3:k-NN数学推导 <统计学习方法>极简笔记P4:朴素贝叶斯公式推导
- Nginx 极简教程(快速入门)
作者:dunwu github.com/dunwu/nginx-tutorial 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4. ...
- 《统计学习方法》极简笔记P4:朴素贝叶斯公式推导
<统计学习方法>极简笔记P4:朴素贝叶斯公式推导 朴素贝叶斯基本方法 通过训练数据集 T={(x_1,y_1),(x_2,y_2),(x_N,y_N)...,(x_1,y_1)} 学习联合 ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
随机推荐
- Mayor's posters-POJ2528(线段树+离散化)
The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...
- Windows 10+Ubuntu 16.04在MBR分区上安装双系统之后没有Windows 10的启动菜单解决方法
背景: 硬盘分区方式:MBR 硬盘容量256,Windows 100,Ubuntu 156,其中主分区安装的是Windows,Ubuntu安装在逻辑分区上,文件系统为Ext4,整个Ubuntu就挂载在 ...
- 基于xml配置springmvc
controller关键代码 public class MenuController extends MultiActionController 方法: public ModelAndView lis ...
- NTKO在线office控件使用实例
目录 1. NTKO在线office控件使用实例 1.1. 基础介绍 1.2. 基本原理 1.3. 实例 1.3.1. 打开.保存部分代码 1.3.2. 动态设值 1. NTKO在线office控件使 ...
- java和c/c++通过JNI相互调用
JNI :Java Native Interface 随便找几篇文章看下就掌握了 http://www.cnblogs.com/icejoywoo/archive/2012/02/22/2363709 ...
- POJ 1849 Two(遍历树)
POJ 1849 Two(遍历树) http://poj.org/problem?id=1849 题意: 有一颗n个结点的带权的无向树, 在s结点放两个机器人, 这两个机器人会把树的每条边都走一遍, ...
- Cocos2d-X中的ProgressTimer
ProgressTimer即进度条,进度条在游戏开发中运用很广泛,比如在一些格斗游戏中,显示血液的变化,还有游戏载入进度,等都离不开进度条 Cocos2d-X中使用CCProgressTimer ...
- Loadrunner&Jemeter进行手机APP压力测试
一.loadrunner通过代理录制app脚本 随着手机APP的广泛应用,手机应用的使用已占据了大量的市场份额,尤其是优秀的手机APP,动辄用户过千万过亿,对于如此庞大的用户量,我们在开发APP时,也 ...
- ie 代理设置中地址和端口置灰的解决办法
@echo offecho 代理设置reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings&quo ...
- [Canvas画图] 藏图阁(16) 人体穴位
本节目标: 趁着今天是愚人节.阿伟决定来重温一下学医的那段日子. 有那么一段时间, 阿伟对武侠小说和医学同一时候产生了浓厚的兴趣,当时最想学的就是葵花点穴手, 一阳指之类的点穴功夫.轻轻一点.就能把别 ...