Canvas入门笔记-实现极简画笔
2024-08-30 06:39:50
今天学习了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();
});
});
最新文章
- 每天一个 Linux 命令(20):find命令之exec
- ARC下的所有权修饰符
- python代码缩进
- CCF真题之相邻数对
- JS1 js获取dom元素方法
- DIV+CSS两种盒子模型
- Teach Yourself Scheme in Fixnum Days 6 recursion递归
- c# 面相对象4-多态性
- Shell脚本笔记
- 《TCP/IP作品详细解释2:达到》注意事项--ARP:地址解析协议
- 唐伯猫的 sql server 2008 的安装和操作记录
- Java类加载原理解析
- LeetCode 268. Missing Number (缺失的数字)
- Django中的F和Q函数
- tomcat的realm域
- Jmeter(二十六)_数据驱动测试
- MySQL优化之my.conf配置详解
- 大数据基础Hadoop 2.x入门
- Elasticsearch 关键字与SQL关键字对比总结
- vue-cli在控制台创建vue项目时乱码的问题