Canvas

最新推荐文章于 2021-05-28 16:28:49 发布
最新推荐文章于 2021-05-28 16:28:49 发布
阅读量159 收藏
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carrotluotian/article/details/116206291
版权

Canvas入门

1、 canvas简介

canvas 是什么？

是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。

canvas能做什么？

  • 基础图形的绘制
  • 文字的绘制
  • 图形的变形和图片的合成
  • 图片和视频的处理
  • 动画的实现
  • 小游戏的制作

支持的浏览器

大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持。 IE8及以下不支持HTML5,但是我们可以进行提示用户更新到最新的版本。

入门案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  html,body{
   margin: 0px;
  }
  canvas{
   background: #ccc;
  }
 </style>
</head>
<body>
 <canvas id="canvas_1">
  我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
 </canvas>
</body>
<script type="text/javascript">
 var canvas_1 = document.getElementById("canvas_1");
 // 设置宽度和高度,但是这种写法会造成额外的问题
 // 画布会拉伸
 // canvas_1.style.width = "500px";
 // canvas_1.style.height = "500px";

 // 所以推荐写法
 // 1.使用内联样式表
 // 2.去使用点(.)
 canvas_1.width = "500"; //注意，不要加 px
 canvas_1.height = "500";

</script>
</html>

2、 绘制直线

  • 线的起点
  • 线的终点
  • 线的颜色
  • 线的宽度

方法 方法
beginPath() 开始定义路径
closePath() 关闭前面定义的路径
moveTo(float x,float y) 把 canvas 的当前路径的结束点移动到 x, y 对应的点
lineTo(float x,float y) 把 canvas 的当前路径从当前结束点连接到 x , y 对应的点

方法说明
beginPath()开始定义路径
closePath()关闭前面定义的路径
moveTo(float x,float y)把 canvas 的当前路径的结束点移动到 x, y 对应的点
beginPath()开始定义路径
lineTo(float x,float y)把 canvas 的当前路径从当前结束点连接到 x , y 对应的点
fill()填充 canvas 当前路径
stroke()填充 canvas 当前路径绘制边框
fillStyle()设置填充 canvas 路径所使用的填充风格
strokeStyle()设置绘制 canvas 路径的填充风格
lineWidth()设置笔触线条的宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    // 打印一下，查看是否能够显示具体环境
    console.log(ctx);
    // 开始绘制
    ctx.beginPath();
    //设置绘制起点
    ctx.moveTo(100,100);
    //设置绘制下一个点
    ctx.lineTo(700,400);
    //设置绘制下一个点
    ctx.lineTo(400,100);
    //设置绘制下一个点
    ctx.lineTo(600,500);
    //结束绘制
    ctx.closePath();
    //设置线的宽度
    ctx.lineWidth = 10;
    //设置绘制的样式
    ctx.strokeStyle = "red";
    //绘制点之间的线路
    ctx.stroke();
    // 设置填充样式
    ctx.fillStyle = "green";
    // 填充当前视图
    ctx.fill();
    // 注意：所有的绘制相应属性全部应该放在 closePath 之前
</script>
</html>

3、 绘制矩形

--
strokeRect(float x,float y,float width,float height)绘制一个矩形边框
fillRect(float x,float y,float width,float height)填充一个矩形边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制矩形</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    // 设置填充颜色
    ctx.fillStyle = '#f00';
    // 填充一个矩形
    ctx.fillRect(30,20,120,60);
    // 设置填充颜色
    ctx.fillStyle = '#ff0';
    // 填充一个矩形
    ctx.fillRect(80,60,120,60);
    // 设置填充颜色
    ctx.strokeStyle = '#00f';
    // 填充一个矩形
    ctx.strokeRect(30,130,120,60);
    // 设置线条宽度
    ctx.lineWidth = 20;
    // 设置线条宽度
    ctx.lineJoin = "round";
    // 设置填充颜色
    ctx.strokeStyle = '#0ff';
    // 填充一个矩形
    ctx.strokeRect(80,160,120,60);
    // 设置线条宽度
    ctx.lineJoin = "bevel";
    // 设置填充颜色
    ctx.strokeStyle = '#f0f';
    // 填充一个矩形
    ctx.strokeRect(130,190,120,60);
    ctx.storke();
</script>
</html>

4、 绘制字符串

--
fillText(String Text, float x, float y, [float maxWidth])填充字符串
strokeText(String Text, float x, float y, [float maxWidth])绘制字符串边框
textAlign设置绘制字符串的水平对齐方式(start、end、left、right、center等)
textBaseAlign设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制文字</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';
    //填充字符串
    ctx.fillText('汪先生真是帅',0,0);
    ctx.strokeStyle = 'f0f';
    ctx.font = 'bold 45px 宋体';
    // 绘制字符串的边框
    ctx.strokeText('汪先生我爱你',0,50,200);
</script>
</html>

5、 设置阴影

--
shadowBlur设置阴影的模糊程度。该值是一个浮点数，该数值越大，阴影的模糊程度也就越大。
shadowColor设置阴影的颜色。
shadowOffsetX设置阴影在 X 方向的偏移
shadowOffsetY设置阴影在 Y 方向的偏移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制文字</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    // 设置阴影的模糊程度
    ctx.shadowBlur = 5.6;
    // 设置阴影的颜色
    ctx.shadowColor = '#222';
    // 设置阴影在 X,Y 方向的偏移
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = -6;
    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';
    //填充字符串
    ctx.fillText('汪先生真是帅',0,0);
    ctx.strokeStyle = 'f0f';
    ctx.font = 'bold 45px 宋体';
    // 绘制字符串的边框
    ctx.strokeText('汪先生我爱你',0,50,200);
</script>
</html>

6、 画圆

在这里插入图片描述
context.arc(x,y,r,sAngle,eAngle,counterclockwise);

--
x圆的中心的 x 坐标。
y圆的中心的 y 坐标。
r圆的半径。
sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle结束角，以弧度计。
counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>绘制圆形</title>
    <style type="text/css">
        .divContent {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #333333;
            margin-left: 200px;
        }
    </style>
    <!-- JQuery CDN-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="module">
        /**画第一个圆形----非动画版
         * */
        let drawArc1 = function () {
            /**获取画布*/
            let canvas = document.getElementById("myCanvas");
            /**
             * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
             * 如下所示，让画布填充父元素
             * @type {void|string|XML|*|jQuery}
             */
            canvas.width = $(".divContent").css("width").replace("px", "");
            canvas.height = $(".divContent").css("height").replace("px", "");
            /**获取画布上下文*/
            let ctx = canvas.getContext("2d");
            /**1)设置画笔颜色，不设置时默认为黑色
             * strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
            ctx.strokeStyle = "#fff";
            /**2）开始一条新路径
             * beginPath() 方法开始一条路径，或重置当前的路径*/
            ctx.beginPath();
            /**3）创建弧线/曲线
             * 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
             * 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
            ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
            /**4）绘制定义好的路径
             * stroke() 方法实际地绘制路径*/
            ctx.stroke();
        };
        /**画第二个圆—————动画版
         * eAngle：圆形结束的角度，会动态变化达到动画的效果
         * canvas：画布，作为参数传入，避免每次重复获取
         * ctx：画布上下文，作为参数传入，避免每次重复获取
         */
        let eAngle = 0;
        let drawArc2 = function (canvas, ctx) {
            /**
             * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
             * 如下所示，让画布填充父元素
             * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
             * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
             * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
             * */
            canvas.width = $(".divContent").css("width").replace("px", "");
            canvas.height = $(".divContent").css("height").replace("px", "");
            /**1)设置画笔颜色，不设置时默认为黑色
             * strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
            ctx.strokeStyle = "#fff";
            /**2）开始一条新路径
             * beginPath() 方法开始一条路径，或重置当前的路径*/
            ctx.beginPath();
            /**3）创建弧线/曲线
             * true 表示逆时针绘制，false 或者不写为顺时针*/
            ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
            /**4）绘制定义好的路径
             * stroke() 方法实际地绘制路径*/
            ctx.stroke();
            /**
             * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
             * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
             * @type {number}
             */
            eAngle = eAngle + 0.1;
            if (eAngle >= 2 * Math.PI) {
                eAngle = 0;
            }
            /**帧动画回调*/
            requestAnimationFrame(function () {
                drawArc2(canvas, ctx);
            });
        };
        $(function () {
            drawArc1();
            /**获取画布*/
            const canvas = document.getElementById("myCanvas2");
            /**获取画布上下文*/
            const ctx = canvas.getContext("2d");
            drawArc2(canvas, ctx);
        });
    </script>
</head>
<body>
<div class="divContent">
    <canvas id="myCanvas">
        浏览器不支持 Canvas
    </canvas>
</div>
<div class="divContent">
    <canvas id="myCanvas2">
        浏览器不支持 Canvas
    </canvas>
</div>
</body>
</html>

7、 矩形

context.rect(x,y,width,height);

--
x矩形左上角的 x 坐标。
y矩形左上角的 y 坐标。
r圆的半径。
width矩形的宽度，以像素计，所以不需要，也不能再带单位）。
height矩形的高度，以像素计，所以不需要，也不能再带单位。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>绘制矩形</title>
    <style type="text/css">
        .divContent {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: #333333;
            margin-left: 100px;
        }
    </style>
    <!-- JQuery CDN-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="module">
        /**画第一个九宫格矩形
         * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
         * ctx：画布上下文
         */
        let drawRect1 = function (canvas, ctx) {
            /**矩形绘制的颜色*/
            let colorArrays = [
                "#FFCC66", "#CC00FF", "#996633",
                "#3366CC", "#330000", "#FFFF66",
                "#000099", "#FF3300", "#007700"
            ];
            /**每个单元格矩形的颜色索引*/
            let index = 0;
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    /**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
                    /**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
                    ctx.beginPath();
 
                    /**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
                     * strokeStyle：设置画笔当前的颜色
                     * */
                    ctx.lineWidth = "2";
                    ctx.strokeStyle = colorArrays[index++];
                    /**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
                     *      这样的就是一个九宫格，而且随着画布尺寸的变化而变化
                     * stroke() 实际绘制已定义的路径*/
                    ctx.rect(j * canvas.width / 3,
                        i * canvas.height / 3,
                        canvas.width / 3,
                        canvas.height);
                    ctx.stroke();
 
                }
            }
        };
 
        /**画第一个九宫格矩形
         * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
         * ctx：画布上下文
         */
        let drawRect2 = function (canvas, ctx) {
            /**矩形绘制的颜色*/
            let colorArrays = [
                "#FFCC66", "#CC00FF", "#996633",
                "#3366CC", "#330000", "#FFFF66",
                "#000099", "#FF3300", "#007700"
            ];
            /**这里用于随机切换一下两个单元格的颜色*/
            let x = 0, y = 0;
            while (x == y) {
                x = Math.round(Math.random() * 8);
                y = Math.round(Math.random() * 8);
            }
            let temp = colorArrays[x];
            colorArrays[x] = colorArrays[y];
            colorArrays[y] = temp;
 
            let index = 0;
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    /**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
                    /**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
                    ctx.beginPath();
                    /**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
                     * strokeStyle：设置画笔当前的颜色
                     * */
                    ctx.lineWidth = "2";
                    ctx.fillStyle = colorArrays[index++];
                    /**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
                     *      这样的就是一个九宫格，而且随着画布尺寸的变化而变化
                     * stroke() 实际绘制已定义的路径*/
                    ctx.rect(j * canvas.width / 3,
                        i * canvas.height / 3,
                        canvas.width / 3,
                        canvas.height);
                    ctx.fill();
                }
            }
            setTimeout(function () {
                drawRect2(canvas, ctx);
            }, 1000);
        };
 
        $(function () {
            /**获取第一张画布*/
            let canvas1 = document.getElementById("myCanvas1");
            /**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
             * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
             * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
             * */
            canvas1.width = $(".divContent").css("width").replace("px", "");
            canvas1.height = $(".divContent").css("height").replace("px", "");
            /**获取画布上下文*/
            let ctx1 = canvas1.getContext("2d");
            drawRect1(canvas1, ctx1);
            /**获取第二张画布*/
            let canvas2 = document.getElementById("myCanvas2");
            canvas2.width = $(".divContent").css("width").replace("px", "");
            canvas2.height = $(".divContent").css("height").replace("px", "");
            /**获取画布上下文*/
            let ctx2 = canvas2.getContext("2d");
            drawRect2(canvas2, ctx2);
        });
    </script>
</head>
<body>
<div class="divContent">
    <canvas id="myCanvas1">
        浏览器不支持 Canvas
    </canvas>
</div>
<div class="divContent">
    <canvas id="myCanvas2">
        浏览器不支持 Canvas
    </canvas>
</div>
</body>
</html>
罗天旭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Delphi 实现设备报警器闪烁报警效果
yct0605的专栏
07-29 2869
设备报警器闪烁报警效果的设计要求，32个设备中每个设备都安装有一个报警器，记录设备周围的温湿度信息，设定一个温湿度的比较值，如果报警器的温湿度信息超出比较值，则进行报警显示并闪烁该设备的报警器图标，下图是报警的主画面，绿色为正常状态，红色表示报警状态，报警状态下是红色和黑色区域交
Canvas.js:html5 canvas的简单类包装器（警告Canvas当前仅在chrome中使用“ use strict”）
05-11
Canvas.js html5 canvas的简单类包装器（警告！Canvas当前仅在chrome中使用“ use strict”） 例子： var id = 'myCanvas'; // id of canvas to which bind class var c = new Canvas(id); // crate new instance for canvas to use // Canvas is chainable function list (most of it's functions returns this) c.rect({ x: 20, y: 5, w: 10, h: 15 }).text({ text: 'Hello World', x: 35, y: 20, type: 'stroke' }); /* or c.rect({x:
基于HTML5 Canvas 实现弹出框
weixin_34162695的博客
06-05 612
2019独角兽企业重金招聘Python工程师标准>>> ...
canvas js绘制多个闪烁五角星
qq_40903560的博客
04-11 592
canvas js绘制多个闪烁五角星 创建画布 const canvas = document.createElement("canvas"); const innerHeight="800"; const innerWidth="700"; canvas.width=innerWidth; canvas.height=innerHeight; 方法封装与储蓄...
Canvas的事件处理，监听点击的位置
热门推荐
开心大表哥
02-12 3万+
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用...
canvas截屏
04-19
在H5开发中，Canvas作为一个强大的绘图工具，可以用于创建动态图形、图像处理和实现游戏等多样化功能。而“canvas截屏”则是利用Canvas API来捕获网页的一部分或者整个页面，生成一个图像数据，通常以PNG或JPEG格式...
canvas裁剪
06-23
"canvas裁剪"是Canvas API中的一个重要功能，它允许开发者选取图像的一部分并进行操作，例如保存、显示或者进一步处理。在本文中，我们将深入探讨Canvas裁剪的原理、方法和实际应用。 首先，裁剪Canvas的基础在于`...
canvas实现环形进度条效果
08-31
Canvas 实现环形进度条效果 本文主要介绍了使用 Canvas 实现环形进度条效果的实例，具有很好的参考价值。下面，我们来详细介绍这个实例。 知识点 1：Canvas 基础 Canvas 是 HTML5 中的一个重要元素，用于创建图形...
9种经典的tooltip信息提示框
11-01
经典的tooltip信息提示框，依赖于jq，方便易于维护，本文的tooltip信息提示框不借助任何插件,只要引入样式即可显示css3酷炫的效果。在手机浏览器、微信或app里面演示是完全没问题的。
基于HTML5 Canvas 实现弹出框效果
09-28
主要介绍了基于HTML5 Canvas 实现弹出框效果,需要的朋友可以参考下
vue+canvas绘制图形
01-09
在`Canvas.vue`内部，我们将定义`<canvas>`标签，并通过JavaScript来操作其上下文（`canvas.getContext('2d')`），实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”，这通常意味着...
canvas教程
08-16
Canvas 教程 本资源提供了详细的 canvas 使用技巧和相关技术阐述，对于初涉 JavaScript 和 canvas 相关技术的朋友有极大地帮助。 canvas 是新的 HTML 元素，可以通过 Script（通常是 JavaScript）绘制图形，用于...
canvas 基本demo
12-09
"canvas 基本demo"是一个利用AntV G6库实现的Canvas应用示例，它展示了如何在React环境中使用Canvas进行图形交互和自定义设计。 首先，AntV G6是一款强大的图形图表库，它专为数据可视化设计，支持多种图表类型，如...
canvas制作呼吸灯
徐同保的专栏
09-06 1499
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas制作呼吸灯&lt;/title&gt; &lt;style type="text/css"&amp
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块
weixin_30908649的博客
02-11 121
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件，除了正常的 flow 效果，其中还有两个十分好用的两个接口 getPercentPosition() 和 getPercentAngle()， 通过这两个接口可以达到很多的效果，这个 demo 我就是利用这两个接口进行对的巡逻人员的角度位置和速度进行控制。 代码实现 绘制背景...
canvas绘制信息提示框
ZJF的博客
05-28 1775
需求场景：运维一个好早之前的项目，需要在通过iclient开发的地图上展示marker图标的同时，展示marker里的一些属性信息，没找到好用的api，所以就通过canvas自己来动态的画出来，画圆角矩形，再以marker方式添加到地图上，看起来还不错。其他gis框架有遇到差不多需求的，也可以使用这个方法来实现。 /** * 绘制提示框tooltips * @param text 文字内容 * @param fontsize 字体大小 * @param fontcolor 字体颜色 *
2.1使用canvas画个圆，每次点击画布弹出提示框
大panda的博客
04-05 1695
&lt;body&gt; &lt;canvas id="canvas" width="500" height="500" style="border:dashed 1px"&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;script&gt; var canvas=document.getElementById('ca
canvas
最新发布
06-01
使用 Canvas 可以在网页中实现动画效果、图表展示、图片处理等功能。Canvas 通过 JavaScript 代码来绘制图形，这意味着我们可以根据需要动态地生成图形，而不需要使用静态的图片。 Canvas 的使用非常灵活，可以在 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值