AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Html5 Canvas绘图实例

2023-07-29 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Html5 Canvas绘图实例

前些年的时候，突然对Canvas感兴趣，利用空闲时间做一些Canvas小例子进行练习，仅供学习分享使用。如有不足之处，还请指正。

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素及JavaScript对象

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

注意：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例一、灯笼绘制

以下是一个灯笼，并作了简要的说明。

具体绘制思路在页面上有说明，不再赘述，代码如下：

<script type="text/javascript">
        //绘制椭圆
        function ParamEllipse(context, x, y, a, b) {
            //max是等于1除以长轴值a和b中的较大者
            //i每次循环增加1/max，表示度数的增加
            //这样可以使得每次循环所绘制的路径（弧线）接近1像素
            var step = (a > b) ? 1 / a : 1 / b;
            context.fillStyle = "#ff0000";
            context.beginPath();
            context.moveTo(x + a, y); //从椭圆的左端点开始绘制
            for (var i = 0; i < 2 * Math.PI; i += step) {
                //参数方程为x = a * cos(i), y = b * sin(i)，
                //参数为i，表示度数（弧度）
                context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.closePath();
        };
        //绘制矩形
        function FillRect(context, x, y, w, h, flag) {
            var grd = context.createLinearGradient(x+w/2, y, x + w/2, y + h);
            if (flag) {
                grd.addColorStop(0, "yellow");
                grd.addColorStop(1, "red");
            } else {
                grd.addColorStop(0, "red");
                grd.addColorStop(1, "yellow");
            }
            context.fillStyle = grd;
            context.fillRect(x, y, w, h);
        }
        //绘制线条
        function SetLine(ctx, x, y, x1, y1) {
            ctx.beginPath();
            ctx.strokeStyle = "yellow";
            ctx.moveTo(x,y);
            ctx.lineTo(x1,y1);
            ctx.stroke();
            ctx.closePath();
        }
        window.onload = function () {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var startX = 150; //中心坐标x
            var startY = 300; //中心坐标y
            var pWidth = 120; //椭圆长轴
            var pHeigth = 80; //椭圆形短轴
            var fWidth = 120; //矩形宽
            var fheight = 40; //矩形高
            //绘制椭圆
            ParamEllipse(ctx, startX, startY, pWidth, pHeigth);
            //在椭圆上方和下方绘制长方形，且有一半的高度和椭圆重叠
            FillRect(ctx, startX - fWidth / 2, startY - pHeigth - (fheight / 2), fWidth, fheight, true);
            FillRect(ctx, startX - fWidth / 2, startY + pHeigth - (fheight / 2), fWidth, fheight, false);
            //在矩形下方绘制线条,8个单位一条线,长度为40，均匀分布在矩形下方
            var lLen = fheight; //画线的范围始终在矩形之下
            var lInterval = 8; //线与线之间的间隔
            for (var i = 0; i < (fWidth / 8) + 1; i++) {
                SetLine(ctx, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2 + lLen);
            }
            //对三部分进行拆解
            //1. 上矩形
            var right = 380;
            FillRect(ctx, startX - fWidth / 2 + right, startY - pHeigth - (fheight / 2) - 150, fWidth, fheight, true);
            //2. 中椭圆
            ParamEllipse(ctx, startX + right, startY - 50, pWidth, pHeigth);
            //3. 下矩形
            FillRect(ctx, startX - fWidth / 2 + right, startY + pHeigth - (fheight / 2) + 50, fWidth, fheight, false);
            //4. 下线
            for (var i = 0; i < (fWidth / 8) + 1; i++) {
                SetLine(ctx, startX - fWidth / 2 + i * lInterval + right, startY + pHeigth + fheight / 2 + 100, startX - fWidth / 2 + i * lInterval + right, startY + pHeigth + fheight / 2 + lLen + 100);
            }
            //画线，将其连接起来
            var lsX = startX + pWidth + 20;
            var lsY = startY;
            var leX = startX + pWidth + 20 + 100;
            var leY = startY;
            SetLine(ctx, lsX, startY - 30, leX - 30, leY - 150);
            SetLine(ctx, lsX, startY - 15, leX, leY - 50);
            SetLine(ctx, lsX, startY + 15, leX, leY + 100);
            SetLine(ctx, lsX, startY + 30, leX - 30, leY + 150);
            //左上标写上说明
            ctx.font = "35px Arial";
            var t = "灯笼组成--2016-11-13";
            ctx.fillText(t, 50, 50);
        }
    </script>

实例二、绘制时钟

绘制一个走动的时钟，具体如下图所示：

具体思路在上图已有说明，代码如下：

<script type="text/javascript">
        //绘制圆形的弧度，ctx 为绘制环境，x,y为绘制中心，r为绘制半径，st为起始弧度，end为结束弧度
        function circle(ctx, x, y, r, st, end, w) {
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, r, st, end, true);
            ctx.stroke();
        }
        //画一个白色的圆，用以覆盖
        function circle0(ctx, x, y, r, st, end) {
            ctx.fillStyle = "#ffffff";
            ctx.beginPath();
            ctx.arc(x, y, r, st, end, true);
            ctx.fill();
        }
        function circle1(ctx, x, y, r, st, end, w) {
            ctx.strokeStyle = "gray";
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.arc(x, y, r, st, end, true);
            ctx.stroke();
        }
        //绘制时钟用的线
        function line(ctx, x1, y1, x2, y2, w) {
            if (w == 1) {
                ctx.strokeStyle = "red";
            } else if (w == 2) {
                ctx.strokeStyle = "blue";
            } else {
                ctx.strokeStyle = "black";
            }
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        }
        function drawClock() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, c.width, c.height);
            //绘制一个钟表
            var cX = 300;
            var cY = 200;
            var radius = 100;
            //绘制分与秒的刻度
            for (var i = 0; i < 60; i++) {
                circle(ctx, cX, cY, radius, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180, 1);
            }
            circle0(ctx, cX, cY, radius * 9 / 10, 0, 2 * Math.PI, true);
            //绘制时刻度
            for (var i = 0; i < 12; i++) {
                circle(ctx, cX, cY, radius, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180, 2);
            }
            circle0(ctx, cX, cY, radius * 8 / 10, 0, 2 * Math.PI, true);
            //外围再画一圈
            circle1(ctx, cX, cY, radius * 11 / 10, 0, 2 * Math.PI, 1);
            ctx.save();
            ctx.fillStyle = "black";
            ctx.font = "10px Arial";
            //在钟表的周围画上数字
            for (var i = 0; i < 12; i++) {
                var fX = cX + Math.cos((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
                var fY = cY + Math.sin((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
                ctx.fillText((i + 1), fX, fY);
            }
            var date = new Date();
            var second = date.getSeconds();
            var minute = date.getMinutes();
            var hour = date.getHours();
            hour = hour % 12; //采用12小时制
            var secondX = cX + Math.cos(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
            var secondY = cY + Math.sin(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
            var minuteX = cX + Math.cos(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
            var minuteY = cY + Math.sin(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
            //小时为了准确起见，应该要加上分的弧度
            var hourX = cX + Math.cos(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
            var hourY = cY + Math.sin(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
            //画秒针，红色
            line(ctx, cX, cY, secondX, secondY, 1);
            //画分针，蓝色
            line(ctx, cX, cY, minuteX, minuteY, 2);
            //画时针，黑色
            line(ctx, cX, cY, hourX, hourY, 3);
            ctx.fillStyle = "black";
            ctx.font = "15px Arial";
            ctx.fillText("CurrentTime is : " + date.toLocaleString(), 150, 450);
            ctx.save();
        }
        window.onload = function () {
            //循环，1s一次，且要在加载完才可以开始，否则会出现找不到对象的异常
            setInterval(drawClock, 1000);
        }
    </script>

实例三、绘制太极图

采用Html5+JavaScript在Canvas中绘制旋转的太极图，如下图所示：

具体思路和绘制逻辑，在上图中已有说明，代码如下：

<script type="text/javascript">
       //只画边框线，无填充
        function bigCircle(ctx,x, y, r, st, end, w,oc) {
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.arc(x, y, r, st, end, oc);
            ctx.closePath();
            ctx.stroke();
        }
        //有填充，画小圆，x，y表示大圆的圆心,r表示大圆的半径，w表示线宽，oc表示方向,l表示上下，d表示度数
        function smallCircle(ctx, x, y, r, st, end, w, oc, l,d) {
            var Angle = d * Math.PI / 180; //偏移角用弧度表示
            ctx.lineWidth = w;
            ctx.beginPath();
            if (l) {
                ctx.fillStyle = "black";
                ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r/10, st, end, oc);
            } else {
                ctx.fillStyle = "red";
                ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r/10, st, end, oc);
            }
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }
        //此函数是画带S形曲线的圆，l表示左右，true表示左，顺时针，false表示右，逆时针
        //d表示度数
        function halfCircle(ctx, x, y, r, w, l,d) {
            ctx.lineWidth = w;
            if (l) {
                ctx.fillStyle = "black";
            } else {
                ctx.fillStyle = "red";
            }
            ctx.beginPath();
            var Angle = d * Math.PI / 180;//偏移角用弧度表示
            ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r / 2, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, true);
            ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r / 2, Math.PI*3 / 2 + Angle, Math.PI / 2 + Angle, true);
            ctx.arc(x, y, r, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, l); //顺时针，逆时针通过参数判断
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }
        var num = 0;//表示旋转的度数
        function drawTaichi() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var cX = 200;
            var cY = 200;
            var radius = 150;
            ctx.clearRect(0,0,c.width,c.height);
            //绘制s线 左
            halfCircle(ctx, cX, cY, radius, 1, true, num);
            //右
            halfCircle(ctx, cX, cY, radius, 1, false, num);
            //绘制小圆，上
            smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, true, num);
            //绘制小圆，下
            smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, false, num);
            //绘制外圆
            bigCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 2, true);
            ctx.save();
            num++;
            num = num % 360;//只有360°,所以大于360，就重新开始
        }
        window.onload = function () {
            setInterval(drawTaichi, 200);
        }
    </script>

实例四、绘制五星红旗

Html5+JavaScript 在Canvas上绘制五星红旗，具体思路如下图所示：

绘制思路在上图中已有说明，具体代码如下：

<script type="text/javascript">
        //绘制五角星，其中一点垂直向上，相隔的点相连，即可绘制。
        function drawStar(ctx,starCenterX,starCenterY,starRadius) {
            var aX = starCenterX;
            var aY = starCenterY - starRadius;
            var bX = starCenterX - Math.cos(18 * Math.PI / 180) * starRadius;
            var bY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
            var cX = starCenterX - Math.cos(54 * Math.PI / 180) * starRadius;
            var cY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
            var dX = starCenterX + Math.cos(54 * Math.PI / 180) * starRadius;
            var dY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
            var eX = starCenterX + Math.cos(18 * Math.PI / 180) * starRadius;
            var eY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
            ctx.beginPath();
            ctx.fillStyle = "yellow";
            ctx.moveTo(aX, aY);
            ctx.lineTo(cX, cY);
            ctx.lineTo(eX, eY);
            ctx.lineTo(bX, bY);
            ctx.lineTo(dX, dY);
            ctx.lineTo(aX, aY);
            ctx.fill();
            ctx.closePath();
        }
        window.onload = function () {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, c.width, c.height);
            var width = 300*1.5;
            var height = 200*1.5;
            var sX = 50; //其实坐标
            var sY = 50; //其实坐标
            var step = 10*1.5;
            //绘制矩形
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.fillStyle = "red";
            ctx.fillRect(sX, sY, width, height);
            ctx.closePath();
            //绘制大五角星
            var bigStarCenterX = sX + 5 * step;
            var bigStarCenterY = sY + 5 * step;
            var bigStarRadius = (height * 3 / 10) / 2; //外接圆直径为旗高3/10，半径要再除以2
            drawStar(ctx, bigStarCenterX, bigStarCenterY, bigStarRadius);
            //绘制小五角星
            var smallStarRadius = (height * 1 / 10) / 2; //外接圆直径为旗高1/10，半径要再除以2
            var smallStarCenterX_1 = sX + 10 * step;
            var smallStarCenterY_1 = sY + 2 * step;
            drawStar(ctx, smallStarCenterX_1, smallStarCenterY_1, smallStarRadius);
            var smallStarCenterX_2 = sX + 12 * step;
            var smallStarCenterY_2 = sY + 4 * step;
            drawStar(ctx, smallStarCenterX_2, smallStarCenterY_2, smallStarRadius);
            var smallStarCenterX_3 = sX + 12 * step;
            var smallStarCenterY_3 = sY + 7 * step;
            drawStar(ctx, smallStarCenterX_3, smallStarCenterY_3, smallStarRadius);
            var smallStarCenterX_4 = sX + 10 * step;
            var smallStarCenterY_4 = sY + 9 * step;
            drawStar(ctx, smallStarCenterX_4, smallStarCenterY_4, smallStarRadius);
        };
    </script>

备注

赤壁【作者】杜牧【朝代】唐

折戟沉沙铁未销，自将磨洗认前朝。东风不与周郎便，铜雀春深锁二乔。

文章标签：
JavaScript
前端开发
HTML5
移动开发
关键词：
HTML canvas
HTML实例
HTML Canvas绘图
HTML绘图
HTML canvas实例
老码识途
目录
相关文章
疯狂的猿
|
5天前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码，很有意思，一团三角形碎片跟随鼠标的移动，不冗长、不笨重，反而有一种很轻盈的感觉，非常不错
疯狂的猿
46 29
疯狂的猿
|
2天前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
疯狂的猿
10 1
疯狂的猿
|
1月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效，基于canvas绘制的空中飘落的纸屑片动画特效，适用于网页动态背景效果代码。简单使用，欢迎下载！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
44 5
疯狂的猿
|
2月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
疯狂的猿
31 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
疯狂的猿
|
2月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸，十秒数字倒计时，全屏倒计时动画效果，给人一种非常大气的视觉感
疯狂的猿
43 0
HTML5 Canvas制作的粒子十秒倒计时源码
疯狂的猿
|
2月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
疯狂的猿
37 5
游客44yag4ft7nckq
|
3月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法，包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用，并强调了正确使用结束标签的重要性。此外，还提到了空元素的使用及大小写标签的规范。
游客44yag4ft7nckq
23 1
html的七十二变
|
4月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG（可缩放矢量图形）和 Canvas（画布）分别用于网页图形绘制。SVG 基于矢量图形，使用 XML 描述，适合静态或少量动态内容（如图标、图表），易于编辑且保持高分辨率；Canvas 则基于位图，通过 JavaScript 绘制，更适合快速更新大量图形的场景（如游戏、动态动画），但在复杂图形计算时可能遇到性能瓶颈。总体而言，SVG 适用于静态和少量动态内容，而 Canvas 更适合高频率更新和性能要求高的场景。
html的七十二变
141 3
html的七十二变
|
4月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素，并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本，以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
html的七十二变
67 3
游客qeoynko2nmbgk
|
4月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布（Canvas）在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布（Canvas）在“圳品”信息系统网页上绘制显示饼图
游客qeoynko2nmbgk
43 0

热门文章

最新文章

  • 1
    一个好看的小时钟html+js+css源码
  • 2
    HTML在线扫雷游戏网页源码
  • 3
    利用 html_table 函数轻松获取网页中的表格数据
  • 4
    在线检测显示屏坏点html工具源码
  • 5
    将html_table2结果转化为tibble的最佳实践
  • 6
    前端基础之HTML
  • 7
    你知道吗？html_table可以提取的不止是表格
  • 8
    jQuery+HTML5实现的微信大转盘抽奖源码
  • 9
    【HTML】——VSCode 基本使用入门和常见操作
  • 10
    HTML5实现的手机验证抽奖领券效果源码
  • 1
    使用 XPath 定位 HTML 中的 img 标签
    84
  • 2
    2024较火的软件宣传单页HTML源码
    121
  • 3
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    156
  • 4
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    162
  • 5
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    686
  • 6
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    230
  • 7
    动态粒子发射404网站HTML源码
    74
  • 8
    【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
    534
  • 9
    HTML 【实用教程】（2024最新版）
    68
  • 10
    HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
    323

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    阿里云开通OSS存储服务详细流程