画板案例

最新推荐文章于 2020-07-15 21:28:10 发布
最新推荐文章于 2020-07-15 21:28:10 发布
阅读量132 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44796453/article/details/88665015
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border:1px solid #000;
        }
    </style>
</head>
<body>
<input class="color" type="color">
<input class="width_ctx" type="range" min="1" max="30" value="1">
<br>
<canvas width="500" height="500">
    当前浏览器版本过低
</canvas>
<script>
    var mcanvas=document.querySelector("canvas");
    var ctx=mcanvas.getContext("2d");
    var mcolor=document.querySelector(".color");
    var mwidth=document.querySelector(".width_ctx");
    var wW,wC;
    var startX,startY,endX,endY,changeX,changeY;

//    console.log(mcolor.value);
    mcanvas.onmousedown=function(event){
        //获取鼠标在盒子中的距离
        startX=event.pageX-mcanvas.offsetLeft-1;
        startY=event.pageY-mcanvas.offsetTop-1;
        wC=mcolor.value;
        wW=mwidth.value;
        ctx.beginPath();
        ctx.lineWidth=wW;
        ctx.strokeStyle=wC;
        ctx.join="bevel";
        ctx.moveTo(startX,startY);
        document.onmousemove=function(event){
            endX=event.pageX-mcanvas.offsetLeft-1;
            endY=event.pageY-mcanvas.offsetTop-1;
            console.log(startX,startY,endX,endY);
            console.log("---------");
            ctx.lineTo(endX,endY);
            ctx.stroke();
        };
    };
    document.onmouseup=function(){
        document.onmousemove=null;
    }
</script>
</body>
</html>
weixin_44796453
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的画板实例
lucasey的博客
03-07 849
Activity代码：public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBitmap; private Canvas canvas; private Paint paint; @Override protected void onCreate(Bundle saved
画板实现小案例
EmotionComputer
02-13 745
废话少说，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画板</title> <style type="text/css"> #myCanvas{ border: 1px solid #000; ma
Android--简单的画画板实例代码
weixin_33905756的博客
04-14 310
<span style="font-size:14px;">public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBitmap; private Canvas canvas; private Paint paint; @Override protec...
画板小案例
lggbxf的博客
02-06 224
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_paint = (ImageView) findViewById(R.id.iv_paint); Bitmap bitmap =
通信基础篇小项目-----简单网络画板的的实现
JoySeeDog
07-31 279
      网络画板的开发也是基于通信基础。关于通信的体内容，在上一篇博客里面已经说过，这里不再多说。这里主要介绍一下该画板的实现过程。当然这三行代码还是核心内容。 ServerSocket server = new ServerSocket(12345); Socket client = server.accept(); Socket client = new Socket("...
Android画板案例
MartinDong
06-05 1268
画板案例: 步骤: 步骤一:声明一些全局上使用的变量:     // 接收布局文件上的图片显示控件     private ImageView iv;     // 声明一个可以用来编辑的bitmap     private Bitmap baseBitmap;     // 画布的声明     private Canvas canvas;     // 画笔的声明
实现画图板功能
八步赶蝉
04-21 1568
1.如果直接在自定义view的触摸事件中绘制图像则每次虽然会执行绘制方法，但是上一次的绘制就没了。所以每次要绘制之前，在view的触摸事件中先将路径保存绘制到bitmap上（缓冲区）,然后在绘制ondraw()中，只需绘制bitmap的内容即可.2.代码如下：public class Main3Activity extends Activity { @Override prote...
画画板案例
weixin_30587025的博客
07-08 180
全局变量 1.首先找一个白色的背景图片作为画板背景 并且在布局中定义好 ImageView 2.找到控件 3.利用工厂模式调用decodeResource()方法得到原图 4.获取原图的副本因为原图系统是不允许修改的 利用Bitmap调用createBitmap()方法 你可以把它理解为白色的画纸 因为获取副本实际就是重新绘画一个新的 通过上面的方法我们获得了画纸...
Android 画板（简单的自定义控件）
javaSXL的博客
08-15 2039
这段时间做了几个自定义控件，整理到博客上供大家参考，先看下画板效果图： 这个画板很简单，但基本的功能都具有了，橡皮擦，清除，撤销，反撤销，保存。想要实现更多的功能，比如说更改画笔颜色，大小等等功能，继续往上加代码就可以了。 实现这个画板的逻辑很简单，就是自定义一个画板控件，下面看下主要的代码： public class DrawingBoardView extends View { ...
画板例子实现
ITcontend的专栏
12-06 1192
画板例子实现详细
画板的实现（一）
Alexwym的博客
06-17 2800
在前面我们已经初步实现了一个简单的登录界面，今天我们来尝试实现一个画板。同以前一样我们把画板的实现分为多个部分。在开始写程序之前我们还是得先做一些准备。一、实现画图程序所需的API类有哪些？javax.swing.JFrame 窗体类java.awt.MouseListener 鼠标事件接口，...
javascript开发简易画板
测试猫
10-11 2075
HTML 清除所有 笔画颜色 字体大小:10px 黑色 红色 绿色 蓝色 CSS *{ margin: 0; padding: 0;    } .box_black{ background-color: black; position: absolute; } .box_red{ background-color: red
Android开发：一个简单的画板
YouAreTea的博客
04-02 1190
思路：通过View.setOnTouchListener()提供的Api获取到手指触摸屏幕的坐标，然后通过Canvas.drawLine()在 bitmap 上画出手指经过的路径。 建议先参阅 Android开发：对图片进行简单的编辑。第一步： 向 drawable 文件夹中添加一个背景图，以作画板背景。假设文件名为 bg.jpg。 往布局文件中添加一个ImageView以作画板。假设其 i
Android-实现简单画图画板
Android、HTML、CSS、JS、JAVA、Kotlin、PHP等技术
08-25 9018
效果如图： 布局文件： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:
android画板案例
ITzhongzi的博客
04-04 368
思路： 模仿电脑端的画图功能。 效果展示 目录结构 代码 MainActivity package com.example.www.paintboard; import android.annotation.SuppressLint; import android.graphics.Bitmap; import android.graphics.BitmapFactory; impo...
制作一个简单的画板
meishadevs的个人博客
04-29 4578
这个画板可以实现简单的绘图功能，可以设置画笔的颜色，可以设置画刷，演示效果如下图所示 点击保存按钮后可以将画好的图片保存在本地，并且在本相册中可以看到保存在本地的图片 实现方式: 第一步:使用Android Studio创建一个android工程，并且在drawable文件夹中放一张图片作为画画板的背景 第二步:修改activity_main
【一天一个Python小案例】简易画板
qq_39573785的博客
07-15 742
【一天一个Python小案例】简易画板 import pygame from pygame.locals import * class Brush: def __init__(self, screen): self.screen = screen self.color = (0, 0, 0) self.size = 0.5 self.drawing = False self.last_pos = None
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值