canvas基础一

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量369 收藏
点赞数 1
分类专栏： web前端 前端技术分享 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutongbao/article/details/82854358
版权

 1.

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas 绘制两个长方形</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (10, 10, 55, 50);
                ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                ctx.fillRect (30, 30, 55, 50);
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

 

 

 

2.

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.fillRect(10, 10, 100, 50);  //绘制矩形,填充的默认颜色为黑色
                //ctx.strokeStyle = '#ff0000';
                ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

ctx.clearRect(15, 15, 50, 25);

3.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50, 50);
                ctx.lineTo(200, 50);
                ctx.lineTo(200, 200);
                ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
                //ctx.stroke(); //描边。stroke不会自动closePath()
                ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

4.

arc(x, y, r, startAngle, endAngle, anticlockwise):

以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

注意：

radians=(Math.PI/180)*degrees   //角度转换成弧度
  1. 这里的度数都是弧度。
  2. 0弧度是指的x轴正方形

 

arcTo(x1, y1, x2, y2, radius):

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(150, 150, 40, 0, Math.PI, false);
                ctx.fill();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50, 50);
                //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
                ctx.arcTo(200, 50, 200, 200, 100);
                ctx.lineTo(200, 200)
                ctx.stroke();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

5.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(10, 200); //起始点
                var cp1x = 40,
                    cp1y = 100; //控制点
                var x = 200,
                    y = 200; // 结束点
                //绘制二次贝塞尔曲线
                ctx.quadraticCurveTo(cp1x, cp1y, x, y);
                ctx.stroke();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(40, 200); //起始点
                var cp1x = 20,
                    cp1y = 100; //控制点1
                var cp2x = 100,
                    cp2y = 120; //控制点2
                var x = 200,
                    y = 200; // 结束点
                //绘制三次贝塞尔曲线
                ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
                ctx.stroke();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

 

 

 

 

 

 

徐同保
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
canvas基础简单易懂教程（完结，多图）
qq_45562973的博客
04-14 1万+
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 目录* Canvas学习 + 一、 Canvas概述 - 1.1 Hello world - 1.2 Canvas的像素化 - 1.3 Canvas的动画思想 - 1.4 面向对象思维实现canvas动
Canvas详解
热门推荐
发果叁
05-23 3万+
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页
css+canvas+html,css加载+canvas动画
weixin_39900437的博客
06-30 110
$(function() {var c = $('canvas').get(0);var ctx = c.getContext('2d');var W = 300;var H = 150;$('canvas').css('width', W);$('canvas').css('height', H);var Bubble = function() {this.x = 100;this.y = 13...
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 2674
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
canvas详细入门教程（1W字 吐血分享）
nvgis的博客
10-14 3万+
canvas入门必看教程，学完可绘制动画！
canvas入门
王道长的技术博客
09-18 4446
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页面
canvas基础
xiaozhuo_tang的博客
01-24 202
Canvas基础 canvas在HTML中的代码 "myCanvas" width="300" height="300"> //writing some words here while broswer do not support canvas. //or some "" alt="" /> is cool too. canvas核心API 渲染上下文getContext
24个canvas基础知识小结
09-28
主要介绍了24个canvas基础知识小结,非常全面详尽，推荐给大家。
Android中Canvas绘图基础详解
11-11
该代码是一个完整的Android工程，详细演示如了如何使用Android中的各种drawXXX方法，以及画笔Paint如何影响绘制的效果。 具体参见博文： http://blog.csdn.net/iispring/article/details/49770651
Canvas 基础绘制
03-29
以下所有 set 打头的方法均为微信小程序特有, 去掉 set 即为 CanvasRenderingContext2D 的属性名. .stroke() 描出当前路径  .setStrokeStyle(color) 设置路径颜色  .setLineWidth(Number ....moveTo() 创建一
canvas基础代码教程
03-19
这个"canvas基础代码教程"包含了一系列HTML页面，每个页面都可能是对Canvas使用的一个实例或者一个具体知识点的讲解。 首先，我们可以从文件名中推测教程的结构。13.html、15.html、18.html、07.html、22.html、09....
一波HTML5 Canvas基础绘图实例代码集合
09-28
在本篇文章中，我们将探讨Canvas的基础绘图实例，包括圆形、矩形、圆角等基本图形的绘制方法。 首先，我们需要获取Canvas元素并创建2D渲染上下文。这是通过以下代码实现的： ```javascript var canvas = document....
Canvas 从入门到劝朋友放弃（图解版）✨
weixin_39415598的博客
07-23 792
本文简介 点赞 + 关注 + 收藏 = 学会了 在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。 根据我多年在家待业经验来看，前端未来在 数据可视化 和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。 本文就用光的速度将 canvas 给入门了。 要入门一个技术，前期最重要是快！所以本文只讲入门内容，能应付简单项目。深入的知识点会在其他文章讲解。 Canvas 是什么？ Canvas 中文名叫 “画布”，是 HTML5 新增
Canvas入门教程
weixin_46056955的博客
02-10 432
HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）
【前端】【canvas详解 非常详细的使用方法】
PiPiFamily的博客
06-08 4227
canvas使用详细教学
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 8893
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
HTML5.Canvas.基础教程教程.pdf
03-05
“HTML5.Canvas.基础教程教程.pdf”是一份...这份HTML5 Canvas基础教程提供了一个系统的学习框架，引导读者逐步掌握Canvas的基本绘图技能。通过实践和探索，读者将能够利用这些知识创建丰富的交互式图形和动画效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值