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

最新推荐文章于 2023-08-01 09:09:53 发布
最新推荐文章于 2023-08-01 09:09:53 发布
阅读量466 收藏 2
点赞数
文章标签： js css html javascript less ViewUI
原文链接：https://www.script-tutorials.com/html5-canvas-custom-brush1/
版权
本文介绍了如何使用HTML5 canvas添加一个使用`bezierCurveTo`函数创建有趣效果的新画笔——BezierCurveBrush。通过增强版的Paint程序，详细展示了从HTML、CSS到JS的实现步骤，提供了现场演示和打包下载资源。
摘要由CSDN通过智能技术生成
HTML5 canvas - Custom brush (BezierCurveBrush)
HTML5 canvas - Custom brush (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 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>
        <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>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles

这是使用CSS样式

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 {
    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 {
    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 = 0;
var selColorB = 0;
var BezierCurveBrush = {
    // inner variables
    iPrevX : 0,
    iPrevY : 0,
    points : null,
    // initialization function
    init: function () { },
    startCurve: function (x, y) {
        this.iPrevX = x;
        this.iPrevY = y;
        this.points = new Array();
    },
    getPoint: function (iLength, a) {
        var index = a.length - iLength, i;
        for (i=index; i< a.length; i++) {
            if (a[i]) {
                return a[i];
            }
        }
    },
    draw: function (x, y) {
        if (Math.abs(this.iPrevX - x) > 5 || Math.abs(this.iPrevY - y) > 5) {
            this.points.push([x, y]);
            // draw main path stroke
            ctx.beginPath();
            ctx.moveTo(this.iPrevX, this.iPrevY);
            ctx.lineTo(x, y);
            ctx.lineWidth = 1;
            ctx.strokeStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.9)';
            ctx.stroke();
            ctx.closePath();
            // draw extra strokes
            ctx.strokeStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.2)';
            ctx.beginPath();
            var iStartPoint = this.getPoint(25, this.points);
            var iFirstPoint = this.getPoint(1, this.points);
            var iSecondPoint = this.getPoint(5, this.points);
            ctx.moveTo(iStartPoint[0],iStartPoint[1]);
            ctx.bezierCurveTo(iFirstPoint[0], iFirstPoint[1], iSecondPoint[0], iSecondPoint[1], x, y);
            ctx.stroke();
            ctx.closePath();
            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);
    BezierCurveBrush.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);
        BezierCurveBrush.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);
            BezierCurveBrush.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 = 0;
var selColorB = 0;
var BezierCurveBrush = {
    // inner variables
    iPrevX : 0,
    iPrevY : 0,
    points : null,
    // initialization function
    init: function () { },
    startCurve: function (x, y) {
        this.iPrevX = x;
        this.iPrevY = y;
        this.points = new Array();
    },
    getPoint: function (iLength, a) {
        var index = a.length - iLength, i;
        for (i=index; i< a.length; i++) {
            if (a[i]) {
                return a[i];
            }
        }
    },
    draw: function (x, y) {
        if (Math.abs(this.iPrevX - x) > 5 || Math.abs(this.iPrevY - y) > 5) {
            this.points.push([x, y]);
            // draw main path stroke
            ctx.beginPath();
            ctx.moveTo(this.iPrevX, this.iPrevY);
            ctx.lineTo(x, y);
            ctx.lineWidth = 1;
            ctx.strokeStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.9)';
            ctx.stroke();
            ctx.closePath();
            // draw extra strokes
            ctx.strokeStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.2)';
            ctx.beginPath();
            var iStartPoint = this.getPoint(25, this.points);
            var iFirstPoint = this.getPoint(1, this.points);
            var iSecondPoint = this.getPoint(5, this.points);
            ctx.moveTo(iStartPoint[0],iStartPoint[1]);
            ctx.bezierCurveTo(iFirstPoint[0], iFirstPoint[1], iSecondPoint[0], iSecondPoint[1], x, y);
            ctx.stroke();
            ctx.closePath();
            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);
    BezierCurveBrush.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);
        BezierCurveBrush.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);
            BezierCurveBrush.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);
}

What I have added – BezierCurveBrush object. This is pretty easy object with own Draw function where we use ‘bezierCurveTo’ function to draw curves between first point (in beginning of drawing) and all next stored points.

我添加的内容– BezierCurveBrush对象。 这是一个非常简单的对象，具有自己的Draw函数，在其中我们使用“ bezierCurveTo”函数在第一个点(在绘制开始时)和所有下一个存储点之间绘制曲线。

现场演示
打包下载

结论 (Conclusion)

Hope that today’s lesson was interesting for you. 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-brush1/

cukengwei3786
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5--canvas--笔记-画笔-直线-矩形-圆-圆弧
看开了
07-24 843
canvas学习笔记 1.获取画笔 通过DOM操作获取canvas元素节点之后(变量名为canvas); let ctx = canvas.getContext(“2d”); 就可以获取canvas的画笔了; 2.画笔的样式 对画笔的操作,也就是调用画笔对象的方法,所以以ctx.开头,方法名是小驼峰 画笔的宽度 ctx.lineWidth=“4”; 画笔的颜色 画笔的颜色因为画法的不同,分为两种...
HTML5画布
qq_44872688的博客
11-10 1651
文章目录前言一、什么是画布二、使用画布1、创建画布2、获取画布3、准备画笔三、绘制线1、初始位置2、连线端点3、描边四、线的样式1、宽度2、描边颜色3、端点形状五、线的路径1、重置路径2、闭合路径3、填充路径六、绘制圆 前言 在网页中，用户通过img标签可以插入需要的图片，但这些图片往往需要预先准备好。在HTML5中，提供了全新的画布功能，让用户可以随时创造丰富多彩、赏心悦目的图案。 一、什么是画布 在网页中，我们把用于绘制图形的特殊区域称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。 二、使
HTML5 Canvas实现web画图之自由画笔
09-27
能实现web端以及手机端同时使用
HTML5简易画笔
weixin_44193063的博客
06-06 428
<!DOCTPE html> <html> <head> <meta charset = "utf-8"> <title>简易画笔</title> <style> *{padding:0;margin:0;} body,html{width:100%;overflow:hidden;} body{background-color:pink;} #test{ background-color:...
在h5中用canvas实现网页画笔功能
热门推荐
weixin_51364599的博客
10-07 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body style="margin-left:20
html5 画布 可改变颜色 画笔粗细
10-10
可以直接运行，一个简单的画布，可以改变画笔颜色、画笔粗细，也可以生成画。就是一个.html文件，css跟js都写在里面
DrawerJs:可自定义的所见即所得HTML画布编辑器
05-11
DrawerJS是一个HTML5小部件，它允许在HTML5画布元素上进行绘图和书写。 完全支持移动设备。 它是一个可自定义的WYSIWYG HTML画布编辑器，用于徒手绘制和创建具有简单形状的草图。 什么是DrawerJs？ 我该如何使用？...
本篇文章所使用的自定义画笔的图片
05-14
5. 绘制与应用：现在，你可以开始在画布上使用自定义画笔进行创作了。可以结合图层蒙版、橡皮擦工具等其他功能，实现更复杂的艺术效果。 画笔素材的应用场景： 1. 数字绘画：自定义画笔可以模拟传统绘画媒介，如...
前端开发笔记（画布操作一）js画布的相关操作HTML5
qq_55956902的博客
03-30 2149
目录 第十章：画布（一） 创建canvas canvas简介 创建canvas getContext()方法 在canvas中绘制图形的步骤 绘制直线、多边形 canvas坐标及方法 路径和描绘 线条绘制 线条样式设置 填充 路径封闭 绘制弧和圆 弧/曲线 绘制矩形 矩形 透明度 透明度 第十章：画布（一） 创建canvas canvas简介 canvas元素用于绘制图形，它只是一块无色透明的图形容器区域，需要用JavaScript脚本来完成绘画。 画布是
强大的H5网页绘图工具chart.js
03-20
强大的H5网页绘图工具，可实时绘制曲线图，柱状图，雷达图等，实现数据可视化
html画图工具源码
09-26
html画图工具源码
html5在线画图工具,HTML5 Canvas画板画图工具 可定义笔刷和画布
weixin_30677191的博客
05-30 840
本文作者html5tricks，转载请注明出处下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码，代码由HTML以及Javascript组成，主要还是Javascript代码。HTML代码：HTML代码非常简单，仅仅是构造了一个canvas容器，我们的画板就在这个地方生成。Javascript代码：首先我们通过一组变量来定义画板的样式，以及一些数据的初始化：var canvas;var...
html5 canvas写成的水墨大写意画笔
MAILLIBIN的专栏
05-24 6678
中国水墨大写意潇洒奔放，元气淋漓，恣意纵横。 而中国大写意用笔讲究如锥画沙，如屋漏痕，如折叉股，要古朴醇厚，怎样用程序模拟这种变幻多端难以捉摸的笔法效果，一直和围棋一样是个世界难题，但是我们可以用比较简易的办法来大致模拟。 可以笔端落于纸面随机变幻其实相当于一个个的圆点的随机变形，而一条起伏变幻的笔迹，就相当于一个个随机波动的点子的连接。 水墨画师 易千忆学堂冰豆小李作
html5 画笔（brush）
编程邦
02-10 2989
<!DOCTYPE html> <html> <head> <title>画笔</title> <meta charset="utf-8"></head> <body> <canvas id="mycanvas" width="600" height="400" style="background: black;"> </canvas> <script type="text/java
WPF---＞Brush，custom Brush，笔刷详解
qq_42069216的博客
11-28 681
文章目录常规使用代码设置颜色xaml中设置自定义画刷自定义颜色自定义笔刷普通流程自定义渐变笔刷 常规使用 代码设置颜色 使用Colors的静态属性进行设置but.Background=new SolidColorBrush(Colors.AliceBlue); 使用System.Windows.SystemColors枚举中获取颜色btn.Background=new SolodColorBrush(SystemColors.ControlColor); xaml中设置 使用颜色名或颜色值&l
html如何制作画笔,HTML5+CSS3从入门到精通 如何实现画板画笔功能
weixin_42459078的博客
06-19 588
本篇教程探讨了HTML5+CSS3从入门到精通 如何实现画板画笔功能，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<实现画板画笔功能，效果如下：123456781$(function(){2varcanvas=document.getElementById(...
【html本地工具】html+JS实现一个超好看的绘画板/涂鸦板，带画笔、矩形、圆形、直线、文本、橡皮擦，有撤销、恢复、保存功能
最新发布
weixin_43165220的博客
08-01 3088
自己写的一个本地绘画板工具，有以下功能：自由画笔、矩形、圆形、直线、文本输入、画笔和橡皮擦调整大小粗细、调整画笔颜色、橡皮擦、保存为图片、 撤销、恢复（反撤销）。功能还是挺完善的。
html5绘制一个曲线,HTML5 canvas基本绘图之绘制曲线
weixin_39826089的博客
06-26 321
是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在>元素上绘图主要有三步：1.获取元素对应的DOM对象，这是一个Canvas...
HTML5基础教程：自定义右键菜单
该资源是一份关于HTML5的课件，主要讲解了如何在HTML5中创建和使用自定义的右键菜单。通过使用`contextmenu`属性，开发者可以为网页元素指定特定的右键菜单。 在HTML5中，自定义右键菜单的功能是一个重要的新增特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值