HTML5 | Canvas画笔小应用（涂鸦板）

以随机色彩和尺寸的画刷来绘制图案。

canvas, paint

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 8645
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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);

编译

CSS

HTML

以随机色彩和尺寸的画刷来绘制图案。

canvas, paint

编辑器支持Emmet

快捷键

以随机色彩和尺寸的画刷来绘制图案。

canvas, paint

HTML5 Canvas 儿童画板 小鸭 蜡笔 橡皮

使用HTML5 Canvas制作超炫动态电子艺术画作（风景画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

HTML5 Canvas 儿童画板小鸭蜡笔橡皮