android 简易涂鸦板,canvas实现的简易涂鸦板效果

用canvas实现的简易涂鸦板效果，用鼠标点击在画布上随意涂鸦

涂鸦

margin: 0;

padding: 0;

}

#canvas1{

box-shadow: 0 5px 40px black;

}

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d')

canvas.onmousedown = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

context.beginPath();

context.moveTo(x,y);

canvas.onmousemove = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

console.log(x)

context.lineWidth = 5;

context.strokeStyle = "red";

context.lineTo(x,y);

context.stroke()

}

canvas.onmouseup = function () {

canvas.onmousemove = null;

}

涂鸦

#canvas1{

box-shadow: 0 5px 40px black;

}

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d')

canvas.onmousedown = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

context.beginPath();

context.moveTo(x,y);

canvas.onmousemove = function (e) {

var ev = e||window.event;

var x = ev.clientX - canvas.offsetLeft;

var y = ev.clientY - canvas.offsetTop;

console.log(x)

context.lineWidth = 5;

context.strokeStyle = "red";

context.lineTo(x,y);

context.stroke()

}

canvas.onmouseup = function () {

canvas.onmousemove = null;

}

android 简易涂鸦板,canvas实现的简易涂鸦板效果相关推荐

android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
Android 小应用之一个activity实现简易手电筒（内附免费源码）
Android小应用之一个activity实现简易手电筒(内附免费源码) 1.activity代码 2.xml代码 3.资源文件代码 4.源码压缩包(免费) 今天爷爷说他手机更新之后找不到手电筒了,我 ...
自定义View-实现简易车速器（真的够简易）
自定义View-实现简易车速器(真的够简易) 学习自定义View挺久了,好久没用都快忘了,这里实现一个简易的车速器算是一个回顾,项目比较简单,代码较少,但自定义View的流程基本都涉及到了.本文不是一 ...
涂鸦，Canvas绘图
公司的项目里有一个功能是,用户有个涂鸦签字的功能,需要再白色面板上涂鸦,然后上传到又拍云,把又拍云返回的图片url通过post请求上传到服务器.摸索了一段时间,完成了这个功能,并且实现的不错.下面贴出 ...
android canvas 保存图片,ionic3 html5 video 抓图保存到手机相册，解决Android手机不支持Canvas drawImage问题...
当然百度出上W条答案上代码,相信下面代码和小伙伴大同吧相信好多做webview app的小伙伴们都有同样的问题,在pc上能轻松实现video 抓图.但是在android手机大多是不支持canvas ...
【Android 应用开发】Canvas 精准绘制文字 ( 文本边界坐标解析 | 绘图位置 )
文章目录一.文本边界坐标解析二.绘图位置一.文本边界坐标解析在上一篇博客 [Android 应用开发]Canvas 精准绘制文字 ( 测量文本真实边界 | 将文本中心点与给定中心点对齐 ) 中 ...
html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...

android 简易涂鸦板,canvas实现的简易涂鸦板效果

android 简易涂鸦板,canvas实现的简易涂鸦板效果相关推荐

最新文章

热门文章