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 ...
随机推荐
- how to read openstack code
本文的目的不是介绍openstack.我们这里假设你已经知道了openstack是什么,能够做什么.所以目的是介绍如何阅读openstack的代码.通过读代码来进一步学习openstack. 转载要求 ...
- Eclipse的SVN插件 Subclipse
原文:https://www.oschina.net/p/subclipse Subclipse 是一个为 Eclipse IDE 添加 Subversion 支持的项目.支持几乎所有版本的Eclip ...
- ThinkPHP3.2 点击看不清刷新验证码
欢迎使用Markdown编辑器写博客 baidu了一下.发现没有可用的源码,自己想了想,以下的方法可行. <!DOCTYPE html> <html> <head> ...
- BIOS Setup
一般而言,普通的计算机系统应用不必关注BIOS的设置.但是如果涉及到主板集成声卡,网卡,或需要进行远程网络唤醒等操作时,必须在BIOS中设置相应参数才能使电脑正常工作.BIOS能对硬件设备进行初始 ...
- Guass列主元、平方根法、追赶法求解方程组的C++实现
一,要解决的问题 选用合适的算法,求解三种线性方程组:一般线性方程组,对称正定方程组,三对角线性方程组. 方程略. 二,数值方法 1,使用Guass列主元消去法求解一般线性方程组. Guass列主元是 ...
- 基于cocos2d-x的跑酷游戏,不同高度地面的碰撞检測demo,有兴趣能够看一看
1. demo大致分为4个模块: 地图,角色,障碍 逻辑检測认为和不同高度地面的碰撞.1次跳和2连跳的实现. 代码链接:http://download.csdn.net/detail/zangleng ...
- C++学习之构造函数中的异常处理
构造函数中可不可以抛出异常?当然可以.从语法上来说,是可以的:从实际情况来看,现在的软件系统日渐庞大和复杂,很难保证 Constructor 在执行过程中完全不发生一点异常. 那么,如果构造函数中抛出 ...
- nginx负载均衡向后台传递參数方法(后端也是nginxserver)
做了一个站点是用nginx 做的负载均衡.后端也是多个nginxserver 遇到了一个问题.当做SSL支持时 前端nginx分发到 后端nginx后就成 http形式了(这样后台php用$_SERV ...
- python 简单连接mysql数据库
1. 安装pymysql 库 pip install pymysql 2.实例本地连接mysql库 #!/usr/bin/python # encoding: utf-8 ""&q ...
- [转] Ubuntu/Linux Mint/Debian 安装 Java 8
本PPA由webupd8制作,支持Ubuntu .04以及对应的Linux Mint版本,Oracle Java 8包提供JDK8 和 JRE8. sudo add-apt-repository pp ...