html页面涂鸦,HTML5 | Canvas画笔小应用（涂鸦板）

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const canvas = document.querySelector('#draw');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

ctx.strokeStyle = '#BADA55'; //ctx is the canvas

ctx.lineJoin = 'round';

ctx.lineCap = 'round';

ctx.lineWidth = 100;

// ctx.globalCompositeOperation = 'multiply';

let isDrawing = false;

let lastX = 0;

let lastY = 0;

let hue = 0;

let direction = true;

function draw(e) {

if (!isDrawing) return; // stop the fn from running when they are not moused down

console.log(e);

ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;

ctx.beginPath();

// start from

ctx.moveTo(lastX, lastY);

// go to

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];

hue++;

if (hue >= 360) {

hue = 0;

}

if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {

direction = !direction;

}

if (direction) {

ctx.lineWidth++;

} else {

ctx.lineWidth--;

}

canvas.addEventListener('mousedown', (e) => {

isDrawing = true;

[lastX, lastY] = [e.offsetX, e.offsetY];

});

canvas.addEventListener('mousemove', draw);

canvas.addEventListener('mouseup', () => isDrawing = false);

canvas.addEventListener('mouseout', () => isDrawing = false);

html页面涂鸦,HTML5 | 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 ...
php写字板代码,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
Html5 canvas 简单画布画板涂鸦例子
简单的Html5 canvas 画板涂鸦例子,巧妙的使用onmousemove 事件来实现画画, 可以实现指定颜色和宽度,如图: <!DOCTYPE HTML> <html>& ...
HTML5 canvas 实现小时钟
正在看HTML5的相关内容,这个是关于canvas应用的小程序 canvas画图很强大,就类似于自己用圆规直尺在画板上画图一样写的时候参照了网上其他代码,比如擦除表针要上下左右多擦除两个像素写完之 ...
html5 canvas 画笔透明的实现方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
怎么用html做出星空页面,用HTML5+canvas代码绘制的星空月亮图案特效代码
脚本代码(For Alixixi.com)如下: 用HTML5绘制的一个星空特效图 canvas{ display: block;border:1px dotted skyblue; } body{ ...
html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, width, height, xCenter, yCenter, squa ...
原生js输出html5,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了<JS+HTML5 Canvas实现简单的写字板功能>,这里再介绍另一种实现方法. ...

html页面涂鸦,HTML5 | Canvas画笔小应用（涂鸦板）

html页面涂鸦,HTML5 | Canvas画笔小应用（涂鸦板）相关推荐

最新文章

热门文章