HTML5画布–适用于您的Paing程序的自定义画笔＃2（气泡画笔）

最新推荐文章于 2024-07-20 22:52:28 发布
最新推荐文章于 2024-07-20 22:52:28 发布
阅读量166 收藏
点赞数
文章标签： html js css less gwt ViewUI
原文链接：https://www.script-tutorials.com/html5-canvas-custom-brush2/
版权
HTML5 canvas - Custom brush #2 (Bubble brush)
HTML5 canvas - Custom brush #2 (Bubble brush)

HTML5 canvas – Custom brush #2 (Bubble brush) for your paing program In our previous tutorial we made BezierCurveBrush. Today I have decided to create new brush for same script. This brush will use ‘arc’ function. In result we will have interesting effect, just check out it!

HTML5 canvas-您的paing程序的自定义画笔＃2(气泡画笔)在我们之前的教程中，我们制作了BezierCurveBrush 。 今天，我决定为同一脚本创建新画笔。 该笔刷将使用“电弧”功能。 结果，我们将产生有趣的效果，只需检查一下即可！

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示
打包下载

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

This is markup of our result page. Here it is.

这是我们结果页的标记。 这里是。

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Custom brush #2 (Bubble brush) for your paing program | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 canvas - Custom brush #2</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-custom-brush2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="column1">
                <canvas id="color" width="500" height="128"></canvas>
            </div>
            <div class="column2">
                <div>Preview:</div>
                <div id="preview"></div>
                <div id="pick"></div>
            </div>
            <div style="clear:both;"></div>
        </div>
        <canvas id="panel" width="1000" height="600"></canvas>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Custom brush #2 (Bubble brush) for your paing program | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 canvas - Custom brush #2</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-custom-brush2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="column1">
                <canvas id="color" width="500" height="128"></canvas>
            </div>
            <div class="column2">
                <div>Preview:</div>
                <div id="preview"></div>
                <div id="pick"></div>
            </div>
            <div style="clear:both;"></div>
        </div>
        <canvas id="panel" width="1000" height="600"></canvas>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

Here are all stylesheets

这是所有样式表

css / main.css (css/main.css)

/* page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color: #000;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 800px;
}
/* custom styles */
.column1 {
    float:left;
    width:500px;
}
.column2 {
    float:left;
    padding-left:20px;
    width:170px;
}
#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
    display:block;
    margin:0 auto;
    height:600px;
    width:1000px;
}
#color {
    border:1px #000 solid;
    box-shadow:0px 4px 6px #444444;
    cursor:crosshair;
}
.column2 > div {
    margin-bottom:10px;
}
#preview, #pick {
    background-color:rgb(0, 195, 135);
    border:1px #000 solid;
    box-shadow:2px 3px 3px #444444;
    height:40px;
    width:80px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


/* page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color: #000;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 800px;
}
/* custom styles */
.column1 {
    float:left;
    width:500px;
}
.column2 {
    float:left;
    padding-left:20px;
    width:170px;
}
#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
    display:block;
    margin:0 auto;
    height:600px;
    width:1000px;
}
#color {
    border:1px #000 solid;
    box-shadow:0px 4px 6px #444444;
    cursor:crosshair;
}
.column2 > div {
    margin-bottom:10px;
}
#preview, #pick {
    background-color:rgb(0, 195, 135);
    border:1px #000 solid;
    box-shadow:2px 3px 3px #444444;
    height:40px;
    width:80px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

步骤3. JS (Step 3. JS)

js / script.js (js/script.js)

var canvas;
var canvasColor;
var ctx;
var ctxColor;
var bMouseDown = false;
var selColorR = 0;
var selColorG = 195;
var selColorB = 135;
var BubbleBrush = {
    // inner variables
    iPrevX : 0,
    iPrevY : 0,
    // initialization function
    init: function () {
        ctx.globalCompositeOperation = 'source-over'; //'lighter' is nice too
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
        ctx.lineWidth = 2;
    },
    startCurve: function (x, y) {
        this.iPrevX = x;
        this.iPrevY = y;
        ctx.fillStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.9)';
    },
    draw: function (x, y) {
        var iXAbs = Math.abs(x - this.iPrevX);
        var iYAbs = Math.abs(y - this.iPrevY);
        iXAbs = (iXAbs > 30) ? 30 : iXAbs;
        iYAbs = (iYAbs > 30) ? 30 : iYAbs;
        if (iXAbs > 10 || iYAbs > 10) {
            ctx.beginPath();
            ctx.arc(this.iPrevX, this.iPrevY, (iXAbs + iYAbs) * 0.5, 0, Math.PI*2, false);
            ctx.fill();
            ctx.stroke();
            this.iPrevX = x;
            this.iPrevY = y;
        }
    }
};
$(function(){
    // creating canvas objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    canvasColor = document.getElementById('color');
    ctxColor = canvasColor.getContext('2d');
    drawGradients(ctxColor);
    BubbleBrush.init();
    $('#color').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
        var pixelColor = 'rgba('+pixel[0]+', '+pixel[1]+', '+pixel[2]+', '+pixel[3]+')';
        $('#preview').css('backgroundColor', pixelColor);
    });
    $('#color').click(function(e) { // mouse click handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
        var pixelColor = 'rgba('+pixel[0]+', '+pixel[1]+', '+pixel[2]+', '+pixel[3]+')';
        $('#pick').css('backgroundColor', pixelColor);
        selColorR = pixel[0];
        selColorG = pixel[1];
        selColorB = pixel[2];
    });
    $('#panel').mousedown(function(e) { // mouse down handler
        bMouseDown = true;
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        BubbleBrush.startCurve(canvasX, canvasY, false, false, false, false, false, false, canvasX, canvasY, 0, 0);
    });
    $('#panel').mouseup(function(e) { // mouse up handler
        bMouseDown = false;
    });
    $('#panel').mousemove(function(e) { // mouse move handler
        if (bMouseDown) {
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);
            BubbleBrush.draw(canvasX, canvasY, false, false, false, false, false, false, canvasX, canvasY, 0, 0);
        }
    });
});
function drawGradients() {
    var grad = ctxColor.createLinearGradient(20, 0, canvasColor.width - 20, 0);
    grad.addColorStop(0, 'red');
    grad.addColorStop(1 / 6, 'orange');
    grad.addColorStop(2 / 6, 'yellow');
    grad.addColorStop(3 / 6, 'green')
    grad.addColorStop(4 / 6, 'aqua');
    grad.addColorStop(5 / 6, 'blue');
    grad.addColorStop(1, 'purple');
    ctxColor.fillStyle=grad;
    ctxColor.fillRect(0, 0, canvasColor.width, canvasColor.height);
}


var canvas;
var canvasColor;
var ctx;
var ctxColor;
var bMouseDown = false;
var selColorR = 0;
var selColorG = 195;
var selColorB = 135;
var BubbleBrush = {
    // inner variables
    iPrevX : 0,
    iPrevY : 0,
    // initialization function
    init: function () {
        ctx.globalCompositeOperation = 'source-over'; //'lighter' is nice too
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
        ctx.lineWidth = 2;
    },
    startCurve: function (x, y) {
        this.iPrevX = x;
        this.iPrevY = y;
        ctx.fillStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.9)';
    },
    draw: function (x, y) {
        var iXAbs = Math.abs(x - this.iPrevX);
        var iYAbs = Math.abs(y - this.iPrevY);
        iXAbs = (iXAbs > 30) ? 30 : iXAbs;
        iYAbs = (iYAbs > 30) ? 30 : iYAbs;
        if (iXAbs > 10 || iYAbs > 10) {
            ctx.beginPath();
            ctx.arc(this.iPrevX, this.iPrevY, (iXAbs + iYAbs) * 0.5, 0, Math.PI*2, false);
            ctx.fill();
            ctx.stroke();
            this.iPrevX = x;
            this.iPrevY = y;
        }
    }
};
$(function(){
    // creating canvas objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    canvasColor = document.getElementById('color');
    ctxColor = canvasColor.getContext('2d');
    drawGradients(ctxColor);
    BubbleBrush.init();
    $('#color').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
        var pixelColor = 'rgba('+pixel[0]+', '+pixel[1]+', '+pixel[2]+', '+pixel[3]+')';
        $('#preview').css('backgroundColor', pixelColor);
    });
    $('#color').click(function(e) { // mouse click handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
        var pixelColor = 'rgba('+pixel[0]+', '+pixel[1]+', '+pixel[2]+', '+pixel[3]+')';
        $('#pick').css('backgroundColor', pixelColor);
        selColorR = pixel[0];
        selColorG = pixel[1];
        selColorB = pixel[2];
    });
    $('#panel').mousedown(function(e) { // mouse down handler
        bMouseDown = true;
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        BubbleBrush.startCurve(canvasX, canvasY, false, false, false, false, false, false, canvasX, canvasY, 0, 0);
    });
    $('#panel').mouseup(function(e) { // mouse up handler
        bMouseDown = false;
    });
    $('#panel').mousemove(function(e) { // mouse move handler
        if (bMouseDown) {
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);
            BubbleBrush.draw(canvasX, canvasY, false, false, false, false, false, false, canvasX, canvasY, 0, 0);
        }
    });
});
function drawGradients() {
    var grad = ctxColor.createLinearGradient(20, 0, canvasColor.width - 20, 0);
    grad.addColorStop(0, 'red');
    grad.addColorStop(1 / 6, 'orange');
    grad.addColorStop(2 / 6, 'yellow');
    grad.addColorStop(3 / 6, 'green')
    grad.addColorStop(4 / 6, 'aqua');
    grad.addColorStop(5 / 6, 'blue');
    grad.addColorStop(1, 'purple');
    ctxColor.fillStyle=grad;
    ctxColor.fillRect(0, 0, canvasColor.width, canvasColor.height);
}

This is combination of two main elements – color picker and drawing board. Today – new brush – with bubble effect.

这是两个主要元素的组合–颜色选择器和绘图板。 如今-具有泡沫效果的新画笔。

现场演示
打包下载

结论 (Conclusion)

Hope that today’s lesson was interesting for you as usual. We made another one nice html5 sample. I will be glad to see your thanks and comments. Good luck!

希望今天的课程像往常一样对您很有趣。 我们制作了另一个不错的html5示例。 看到您的感谢和评论，我将非常高兴。 祝好运！

翻译自: https://www.script-tutorials.com/html5-canvas-custom-brush2/

cukengwei3786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5画布–自定义画笔（BezierCurveBrush）
cukengwei3786的博客
08-05 462
HTML5 canvas – Custom brush (BezierCurveBrush) for your paing program I hope that you still remember when we did our first Paint program with HTML5. Today I have decided to enhance it with adding new ...
css 水平垂直居中方式
MFWSCQ的博客
05-14 225
html 结构如下： <div class="box"> <div class="item">一些内容空间</div> </div> 方式： 1.absolute + 负值 margin 先利用绝对定位将子元素定位到左边和上边都为 50% ，但是这时候是子元素的 左边界 和 上边界 分别距离父级 左边界和上边界的 中间位置，子元素的宽高实际上在中心位置的右下边，为了居中，使用 margin-left 和 margin-top 各为负数的子元素
用html画出爱心
热门推荐
xieixnxia的博客
04-24 1万+
用html写出的爱心 软件：Sublime Text3 思想：在一个盒子中嵌套两个矩形，将矩形上部做成圆角，各向左向右旋转45度。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>白鹿为霜</title> <style type="text/css"> body{ margin: 0;/*外边距 上下 左右*/
wether.html5.qq.com,人教版英语九年级全一册Unit 1单元测试卷及参考答案解析（含听力...
weixin_33722375的博客
06-30 9583
UNIT 1　达标测试卷时间：120分钟　满分：150分第一卷　听力部分(30分)一、关键词语选择(共5小题；每小题1分，满分5分)1. A. note B.nose C. notice2. A. repair B. report C.repeat3. A. widely B. quickly C....
calendar源码java-balinese-date-java-lib:BalineseDate是一个开放源代码库，用于使用Java开发B
05-19
Pon（在2000年之前）和Paing（在2000年之后） 马拉马萨（ = 2003） BalineseDate也有一些可供开发人员使用的实用程序，例如： 从所选日期（v0.2.0）过滤BalineseDate 从选定的巴厘岛日期列表（v0.4.0）过滤巴厘岛...
AIX进程监控与管理.pdf
09-29
而PAING SPACE部分则关注于系统的页空间分配和使用情况，有助于理解磁盘I/O性能。 pTools是一组用于深入监控和调试进程的工具。其中，procwdx显示进程的工作区信息，procfiles查看进程打开的文件，procflags查看...
C# Word转换HTML（附在线转换工具）
学习和分享
07-17 934
根据你的具体需求（如是否需要Microsoft Office、性能要求、成本考虑等），你可以选择使用或Aspose.Words来将Word文档转换为HTML。如果你正在寻找一个不依赖于Microsoft Office的解决方案，并且需要更多的灵活性和控制，那么Aspose.Words可能是一个更好的选择。
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
u014614478的博客
07-16 908
PhantomJS 生成图片，pdf，爬虫等功能
【Godot4.2】MLTag类：HTML、XML通用标签类
巽的博客
07-16 1062
HTML和XML采用类似的标签形式。之前在Godot中以函数库形式实现了网页标签和内容生成。能用，但是缺点也很明显。函数之间没有从属关系，但是多有依赖，而且没有划分出各种对象和类型。如果以完全的面向对象形式来设计标签类或者元素类，将可以更贴近HTML或XML的本来面目。也更容易生成。整体思路是设计如下的类继承结构：实现之后，将可以充分的定义和生成HTML、XML和SVG标签，并用于内容生成或文档解析。纯面向对象的设计，尤其是基于继承的多个类组成的体系在某些方面还是很有用的。
用HTML做python教程02
2401_82944012的博客
07-20 562
用HTML做python教程02前言上次的代码正文最后 前言 我们上次用HTML做了一个python教程关于数据类型和print()python的内置函数，上次留了个小尾巴，这次补上 上次的代码 上次最后将了响应式，或者说是自适应，具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
第一章、算法中的时间复杂度分析
Zjs15630471263的博客
07-20 504
想必打算学习算法的同学听说过这样一个概念：程序≈数据结构+算法。其中数据结构是实现程序的基本框架。而运用算法就是优化程序执行时间或空间上的必要措施。即寻找一个方法使程序的性能达到最优解。
基于百度地图API实现地图位置选取的移动端页面开发教程 (JQuery+Html+JavaScript+CSS)
踏雨歌青春，诗酒趁年华
07-20 2482
本文详细讲解了如何使用百度地图API实现移动端页面中的地图位置选取功能。文章首先介绍了百度地图API的2.0和3.0版本功能，并重点采用3.0 API。接着，逐步展示了如何构建基本的地图页面，如何通过点击地图获取经纬度和地理信息，以及如何实现模糊查询地址并在地图上标注。最后，提供了完整的代码示例，并总结了基于百度地图API进行地图位置选点的开发过程，帮助开发者快速上手并应用到实际项目中。
html+canvas 实现签名功能-手机触摸
darling331的博客
07-18 350
手机上的效果图 需要注意，手机触摸和鼠标不是一个事件，不能通用，上一篇是关于使用鼠标的样例 相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
记录解决springboot项目上传图片到本地，在html里不能回显的问题
weixin_46085253的博客
07-20 218
项目场景：在我的博客系统里：有个相册模块：需要把图片上传到项目里，在html页面上显示。
Html review1
Violetto_Yan的博客
07-20 141
7、input 里的type如果是email 和url（网址）、number（数字）会自动验证。audio src=“资源路径” controls 进度条 autoplay 自动播放。iframe src=“path” name=“框架表示名” width height。number的属性 min最小值 max最大值 step步长，每次增加/减少多少。行内元素的宽度是内容撑起来的，几个行内可以在一行a、strong、em。表单的初级验证，减轻服务器的压力，在前端进行简单的验证。header 标题头部。
六边形动态特效404单页HTML源码
爱酷码的博客
07-17 1296
动态悬浮的六边形，旁边404文字以及跳转按钮，整体看着像科技二次元画风，页面简约美观，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可
Web开发：一个可拖拽的模态框（HTML、CSS、JavaScript）
m0_65029152的博客
07-12 1275
本文主要记录使用html、css、JavaScript编写一个可拖拽模态框的相关内容和实现过程；
HTML语法
最新发布
m0_63227888的博客
07-20 317
标题标签meta标签。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值