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 ...
随机推荐
- UVA 10603_Fill
题意: 给定三个杯子容量,初始只有第三个杯子满,其余为空,求最少需要倒多少水才能让某一杯子中有d升水,如果不能达到,则小于d且尽量接近. 分析: 因为要求转移水量最少,所以采用优先级队列保存每次的状态 ...
- Delphi DBGrid实现多选
DBGrid1.Options:= DBGrid1.Options+[dgMultiSelect]; //先设置DBGrid1的多选属性为True if DBGrid1.SelectedRows.C ...
- c内存分配(转)
图示 C内存分配 程序代码区 存放函数体的二进制代码 全局数据区 全局变量和静态变量的存储是放在一起的.初始化的全局变量和静态变量在一块区域,未初始化的全局变量和未初始化的静态变量在相邻的另一块区域. ...
- 自己构建的Lumbda表达式
自己构建的Lumbda表达式 定义接口: package com.stono.lambda; public interface Add { public void add(int x, int y); ...
- 启用Mac系统读写NFTS磁盘
从Mac OSX 10.6系统开始苹果系统已经内置对NTFS写入功能,但苹果没有公开说明,而且在默认状态下是没有开启的.SL-NTFS是一款Mac上的小工具,它可以直接为你的Mac增加NTFS的写入权 ...
- 使用HTML5监測站点性能
在这个信息爆炸的互联网时代,越来越多的人缺少了等待的耐心.站点性能对于一个站点来说越来越重要.下面为监控到的站点打开时间对跳出率的影响: 当站点打开时间在0-1秒时,跳出率为12% 当站点打开时间在1 ...
- Raphael.js API 之Element.remove(),Element.removeData(),paper.text(),Element.node(),Element.onDragOver
/*API-38*/ Element.remove() 删除某个元素对象,无返回值 /*API-39*/ Element.removeData([key]); 删除某个key的value值.假设没有特 ...
- Replica Sets+Sharding方案之真枪实弹篇
话说在虚拟机中会报各种错误.在真实的环境中就不会那么痛苦了. 想了一下虚拟机中报错的原因有. 机器卡,处理的时间长就会抛出错误 还有虚拟机假设给的空间太小.也会报异常. 此处讲讲我的大致思路. 第一, ...
- npm won't install packages “npm ERR! network tunneling socket could not be established, cause=Parse Error”
昨天在使用npm安装react-native的时候一直报网络不能connection,可是在浏览器中直接访问时是成功,搜索百度无果,最后在google中找到了这个解决方案:http://stackov ...
- Keil和IAR——使用笔记
1. 几个宏的定义 Keil和IAR均用到以下三种宏定义,分别是:USE_STDPERIPH_DRIVER——表示使用ST提供的标准外设固件库:STM32F40_41xxx——作为芯片的判断:VECT ...