html实现画板

最新推荐文章于 2024-05-01 18:28:02 发布
置顶 最新推荐文章于 2024-05-01 18:28:02 发布
阅读量2.9k 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YU_coder/article/details/79857203
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas width="500" height="500"id="canvas" >
<style>
*{padding:0;margin:0;}
body{background: #ccc;}
canvas{
background: #fff;margin: 50px 10px;
}
input{
display: inline-block;
width: 80px;height:30px;cursor: pointer;margin-left: 10px; }
</style>
</canvas>
<div> 
<input type=" button"  id="red" value="红画笔" />
<input type=" button"  id="green" value="绿画笔" />
<input type=" button"  id="blue" value="蓝画笔" />
<input type=" button"  id="default" value="重置颜色" />
<input type=" button"  id="clear" value="清除画布" />
</div>
<script>
window.οnlοad=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var oInput=document.getElementsByTagName("input");

for(var i=0;i<oInput.length;i++){
oInput[i].οnclick=function(){
var ID=this.getAttribute("id");
switch(ID){
case'red':
ctx.strokeStyle='red';
break;
case'green':
ctx.strokeStyle='green';
break;
case'blue':
ctx.strokeStyle='blue';
break;
case'default':
ctx.strokeStyle='black';
break;
case'clear':
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
break;
}
}
}
draw();
function draw(){
canvas.οnmοusedοwn=function(ev){
var ev =ev||event;
ctx.beginPath();
ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);


document.οnmοusemοve=function(ev){
var ev =ev||event;
ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
ctx.stroke();
}
document.οnmοuseup=function(ev){

document.οnmοusemοve=document.οnmοuseup=null;
ctx.closePath();
 }
}
}
}
</script>
</body>

</html>


神奇Y先生
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
初学HTML：在线简易画板设计。
qq_57142520的博客
08-11 1469
设计了一个简易画板，通过HTML的Canvas元素实现一个在线画板，用户可以在上面绘制图形或涂鸦。
（html）canvas制作画板
Major_S的博客
07-26 235
【代码】（html）canvas制作画板。
前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色
最新发布
2401_84436095的博客
05-01 48
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
html：canvas画布绘图简单入门-画板-5
彭世瑜的博客
01-02 1182
canvas示例系列： html：canvas画布绘图简单入门-1 html：canvas画布绘图简单入门-2 html：canvas画布绘图简单入门-绘制时钟-3 html：canvas画布绘图简单入门-刮刮乐-4 画板示例 源码较多，可直接查看在线示例，右键查看源码 https://mouday.github.io/front-end-demo/canvas/canvas-draw.html ...
【html本地工具】html+JS实现一个超好看的绘画板/涂鸦板，带画笔、矩形、圆形、直线、文本、橡皮擦，有撤销、恢复、保存功能
weixin_43165220的博客
08-01 2858
自己写的一个本地绘画板工具，有以下功能：自由画笔、矩形、圆形、直线、文本输入、画笔和橡皮擦调整大小粗细、调整画笔颜色、橡皮擦、保存为图片、 撤销、恢复（反撤销）。功能还是挺完善的。
用html+js的canvas创建一个画板【建议收藏】
小魏快起床的博客
02-22 838
在浏览器创建一个画板，可以随意涂涂画画，还可以下载自己画好的作品，简单实用。
javascript实现画板功能
10-15
在JavaScript中实现一个画板功能，我们可以利用HTML5的Canvas元素和相关API。Canvas提供了一个在网页上绘制图形的画布，通过JavaScript控制其行为，可以实现类似绘图软件的功能。以下是一个简单的JavaScript画板实现...
涂鸦板简单实现 Html5编写属于自己的画画板
12-30
最近了解到html5强大的绘图功能让我惊奇，于是，写了个小玩意—涂鸦板，能实现功能有：画画，改色，调整画笔大小 html5的绘图可以分为点，线，面，圆，图片等，点和线，这可是所有平面效果的基点，有了这两个东西，...
HTML5画板画图工具特效代码
03-20
HTML5画板画图工具是一种基于HTML5 Canvas技术的在线绘图应用，它允许用户在网页上进行自由创作，提供了一系列丰富的绘图功能。Canvas是HTML5中的一个核心元素，它是一个二维图形绘制区域，通过JavaScript可以实现...
huaban.rar_html5画板
09-21
为了实现画板功能，我们需要监听鼠标事件。当用户在Canvas上按下鼠标时，记录下起点坐标，然后在鼠标移动时持续更新终点坐标，释放鼠标时停止绘制。这通常涉及到`mousedown`、`mousemove`和`mouseup`事件的监听。...
js+canvas实现画板功能
10-14
在这个案例中，我们将深入探讨如何使用 JavaScript 和 Canvas 实现一个基础的在线画板。 首先，HTML 结构包含了 Canvas 元素和一些工具栏元素，如颜色选择器、画笔粗细滑块和清屏按钮。Canvas 元素通过 `id=...
HTML5实现的完整的画板功能
05-16
1、去锯齿优化，2、笔锋优化，3、界面美观。可以调整颜色、画笔风格，擦除等多个功能
html5 涂鸦画板-原创
11-02
使用html5+css3+jquery 制作的画板，包括对图片的修改，各种滤镜，对图片的缓存，各种画笔，喷桶，形状，颜色等50多种功能，纯原创
canvas实现的画板
05-18
用html5的canvas实现的一个简易的画板，可以画直线、矩形、圆形，可以选择线条粗细和线条颜色’
原生小案例：如何使用HTML5 Canvas构建画板应用程序
前端达人
08-23 933
使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。HTML canvas标签是一个H...
【html画板】网页画板绘画效果
weixin_62061392的博客
04-08 890
网页画画功能
HTML5 使用canvas实现画板功能(画笔颜色切换、粗细调整、清除图像)
yuhaowen的博客
03-30 6474
标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。 实现画笔颜色切换 画笔粗细调整 清除图像 绘制矩形 绘制圆形 创建一个画布（Canvas） <canvas id="canvas" width="900" height=500" style="border: 2px #5.
实现一个canvas画板
阿嚏乱码的地方
03-11 6902
&lt;canvas&gt;是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。 ——摘自MDN canvas MDN canvas有许多的API，可以插入图片，可以编写文字，可以处理视频。按照MDN给出的canvasPAI，可以将canvas学的很好，但是前端学习的精髓是用到什么...
html实现画板的基本操作,javascript实现画板功能
weixin_42271195的博客
06-20 390
本文实例为大家分享了javascript实现画板功能的具体代码，供大家参考，具体内容如下画板功能的实现*{margin: 0;padding: 0;list-style: none;}body{background:url(11.jpg) 0 0 no-repeat;}.wrapper{margin: 10px;}.wrapper canvas{border: 1px solid blue;bor...
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，颜色会变为白色，从而实现了橡皮擦的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值