HTML5 实现画板

最新推荐文章于 2024-05-04 15:57:19 发布
最新推荐文章于 2024-05-04 15:57:19 发布
阅读量690 收藏
点赞数
分类专栏： HTML5 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tukangzheng/article/details/24887673
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP100</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#php100{border:1px solid #ccc;}
</style>
</head>
<body>
<canvas id="php100" width="500" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("php100");
var p100 = canvas.getContext("2d");
p100.lineWidth=5;
p100.strokeStyle="red";
var pp = false;
//当鼠标按下时
$("#php100").mousedown(function(event) {
/* Act on the event */
//alert(event.pageX);
var mouseX = event.pageX - this.offsetLeft;
var mouseY = event.pageY - this.offsetTop;
pp = true;
p100.moveTo(mouseX, mouseY);
});


//当鼠标抬起时
$("#php100").mouseup(function(event) {
/* Act on the event */
pp = false;
});


//当鼠标移动时
$("#php100").mousemove(function(event) {
/* Act on the event */
var mouseX = event.pageX - this.offsetLeft;
var mouseY = event.pageY - this.offsetTop;
if(pp){
p100.lineTo(mouseX, mouseY);
p100.stroke();
}
});
</script>
</body>
</html>
tukangzheng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色、复选
2401_84152991的博客
04-21 629
/ 画笔宽度// 文本字号// 字体名称// 文本粗细// 渲染文字行间距（行高 + lineSpace）// 最大高度（画板的最大高度尺寸）// 有画板的最大高度尺寸 ‘text(文本)’ 才会支持缩放，否则不会进行缩放，比例按 1 处理，其他笔画类型不受影响。// 是否可以编辑// 是否填充颜色（箭头类型）// 显示编辑矩形框（目前支持：‘text(文本)’ 其他画笔类型不需要支持）// 是否支持窗口缩放 重新调整元素坐标。
原生小案例：如何使用HTML5 Canvas构建画板应用程序
前端达人
08-23 937
使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。HTML canvas标签是一个H...
HTML5——网页绘画板
chen_wanfang的博客
03-09 1198
1.HTML5概述：HTML5的设计目的是为了在移动设备上支持多媒体。              HTML5代替了绝大部分HTML4的编码方式，但是与HTML4的编码方式一样。              HTML5中还有很多实用的标签（canvas），它们能实现很多而又酷炫的效果，而且代码量极少。 2.Canvas标签：Canvas对象将给浏览器带来直接在上面绘制矢量图的能力，取代F
基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条
前端之路
07-01 4311
基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条
Web前端Canvas实战 纯HTML5、CSS、JavaScript实现绘画板
是光の谢宣骞博客
12-25 1918
一个小demo，帮助你开发~
HTML5绘画板
MMKJSH的博客
11-08 112
HTML5绘画板
HTML5的画布
Han_Zhou_Z的博客
11-12 425
目录 一、H5中的画布标签 二、获取画布 三、获取画笔 四、画直线 五、线条的路径 六、图形填充 七、绘制圆 一、H5中的画布标签 <canvas id="画布的名称" width="宽度" height="高度"> </canvas> 二、获取画布 var cas = document.getElementById("画布的名称") 三、获取画笔 context对象，使用该对象可以在画布上绘制图形 var ctx = cas.getContext(
HTML5 -- canvas实现简易画板
删库跑路
08-10 2796
效果预览：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script type=
涂鸦板简单实现 Html5编写属于自己的画画板
12-30
最近了解到html5强大的绘图功能让我惊奇，于是，写了个小玩意—涂鸦板，能实现功能有：画画，改色，调整画笔大小 html5的绘图可以分为点，线，面，圆，图片等，点和线，这可是所有平面效果的基点，有了这两个东西，...
HTML5画板画图工具特效代码
03-20
HTML5画板画图工具是一种基于HTML5 Canvas技术的在线绘图应用，它允许用户在网页上进行自由创作，提供了一系列丰富的绘图功能。Canvas是HTML5中的一个核心元素，它是一个二维图形绘制区域，通过JavaScript可以实现...
huaban.rar_html5画板
09-21
为了实现画板功能，我们需要监听鼠标事件。当用户在Canvas上按下鼠标时，记录下起点坐标，然后在鼠标移动时持续更新终点坐标，释放鼠标时停止绘制。这通常涉及到`mousedown`、`mousemove`和`mouseup`事件的监听。...
HTML5实现的完整的画板功能
05-16
1、去锯齿优化，2、笔锋优化，3、界面美观。可以调整颜色、画笔风格，擦除等多个功能
html5 canvas实现绘图板
05-12
html5 canvas绘图板，实现了如下功能： 1、调色（只有固定的几种颜色）、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
HTML5工具台网页绘画板.zip
05-23
HTML5工具台网页绘画板基于jquery-3.3.1.min.js制作，工具台绘画板有绘制直线、绘制矩形、绘制等腰三角形、绘制直角三角形、铅笔、绘制多边形、绘制圆形、绘制椭圆、橡皮擦、转换填充样式、修改填充色、线条加粗、撤销、刷新画板、保存等功能。
HTML5+canvas实现的画板功能特效代码
03-20
- 用户交互：为了实现画板功能，我们需要监听用户的鼠标事件，如`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）。这些事件可以捕捉用户的绘画动作，更新画布上的内容。 - 颜色与线条...
html5 canvas 简单画板实现代码
09-28
在本示例中，我们将探讨如何使用HTML5 Canvas创建一个简单的在线画板。 首先，让我们来看一下提供的代码片段。在HTML部分，我们创建了一个`<canvas>`元素，它有一个ID "can"，并设置了宽度和高度为600px和500px，...
HTML5-网页绘画板
BiggerLong的博客
03-15 1136
一：strokeRect(X,Y,W,H) 通过此方法可以实现在网页的指定位置画出指定大小的矩形。 参数1：X就是指定了X轴的位置，值越大越往右。 参数2：Y就是指定了Y轴的位置，值越大越往下。 参数3：W就是指定了矩形的宽度。 参数4：H就是指定了矩形的高度。 二：context.moveTo(100,100); 通过X轴跟Y轴确定一个开始点。 三：context.lineTo(
微信小程序授权登录和获取手机号功能（详细）
2401_83916355的博客
03-30 2305
请依次允许获得你的公开信息及手机号码请升级微信版本（四）index.wxss.header {.content {.operBtns{important;important;*/（三）index.jsPage({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。AuthorizedLogin: ‘授权登录’,
1：创建项目工程(1)
最新发布
2401_84097436的博客
05-04 737
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html画板橡皮擦代码
11-18
以下是一个HTML5 Canvas画板橡皮擦的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Canvas画板橡皮擦</title> <style type="text/css"> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 设置画笔属性 context.lineWidth = 5; context.lineCap = "round"; context.lineJoin = "round"; context.strokeStyle = "#000"; // 绘制线条 var isDrawing = false; var lastX = 0; var lastY = 0; function draw(e) { if (!isDrawing) return; context.beginPath(); context.moveTo(lastX, lastY); context.lineTo(e.offsetX, e.offsetY); context.stroke(); lastX = e.offsetX; lastY = e.offsetY; } canvas.addEventListener("mousedown", function(e) { isDrawing = true; lastX = e.offsetX; lastY = e.offsetY; }); canvas.addEventListener("mousemove", draw); canvas.addEventListener("mouseup", function() { isDrawing = false; }); // 设置橡皮擦属性 var eraser = document.getElementById("eraser"); eraser.addEventListener("click", function() { context.lineWidth = 20; context.strokeStyle = "#fff"; }); // 清空画布 var clearBtn = document.getElementById("clear"); clearBtn.addEventListener("click", function() { context.clearRect(0, 0, canvas.width, canvas.height); }); </script> <button id="eraser">橡皮擦</button> <button id="clear">清空</button> </body> </html> ``` 该代码实现了一个基本的Canvas画板，包括绘制线条、清空画布、使用橡皮擦等功能。当点击“橡皮擦”按钮时，画笔的粗细会变为20，颜色会变为白色，从而实现了橡皮擦的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值