HTML5画布–自定义画笔（BezierCurveBrush）

最新推荐文章于 2023-08-01 09:09:53 发布

cukengwei3786

最新推荐文章于 2023-08-01 09:09:53 发布

阅读量460

点赞数

文章标签： js css html javascript less ViewUI

原文链接：https://www.script-tutorials.com/html5-canvas-custom-brush1/

版权

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 additional brush to it. This brush will use ‘bezierCurveTo’ function. In result we will have interesting effect, just check out it!

HTML5 canvas –用于您的paing程序的自定义画笔(BezierCurveBrush)我希望您仍然记得我们使用HTML5 编写第一个Paint程序时的情况。今天，我决定通过添加新的画笔来增强它。该笔刷将使用“ bezierCurveTo”功能。结果，我们将产生有趣的效果，只需检查一下即可！

Here are our demo and downloadable package:

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

现场演示

打包下载

Ok, download the source files and lets start coding !

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

步骤1. HTML (Step 1. HTML)

Here are html code of our enhanced Paint:

以下是增强型Paint的html代码：

index.html (index.html)


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Custom brush (BezierCurveBrush) for your paing program | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.5.2.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 canvas - Custom brush (BezierCurveBrush) for your paing program</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-custom-brush1/" 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>

最低0.47元/天解锁文章

cukengwei3786

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布–自定义画笔（BezierCurveBrush）

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 ...
复制链接

扫一扫