Html5 Canvas绘图实例

article/2025/9/13 0:00:21

前些年的时候，突然对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; //中心坐标xvar startY = 300; //中心坐标yvar 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，半径要再除以2drawStar(ctx, bigStarCenterX, bigStarCenterY, bigStarRadius);//绘制小五角星var smallStarRadius = (height * 1 / 10) / 2; //外接圆直径为旗高1/10，半径要再除以2var 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>

备注

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

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


http://chatgpt.dhexx.cn/article/JLALgU9U.shtml

相关文章

用html做个随机点名系统代码,html座位表随机点名的实例代码

用html做个随机点名系统代码,html座位表随机点名的实例代码

这篇文章详解html座位表随机点名的实例代码点名 td { width: 9.09%; height: 50px; text-align: center; } .tdBg { background-color: pink; } var timer null; // 这是一个函数&#xff0c;表示一个功能 function start(){ timer setInterval(function(){ // alert("要…
阅读更多...
在html中如何写日期的代码,日期html代码

在html中如何写日期的代码,日期html代码

日期 时间 星期的html代码是什么代码 创建静态方法findDate，返回List类型。 声明一个List list集合，向List集合存储英文星期。 调用findDate静态方法，并打印List集合存储结果。 CSS布局HTML小编今天和大家分享一个显示当前系统日期的HTML代码 显示的格式为“某年某月某日”，…
阅读更多...
html向上移动图片代码,图片随网页上下移动的代码实例

html向上移动图片代码,图片随网页上下移动的代码实例

我们以腾讯QQ网页在线客服为例，大家将代码拷到DW中，用心体会。图片随网页上下移动的代码实例 function picsize(obj,MaxWidth){img=new Image(); img.src="/obj.src"; if (img.width>MaxWidth) {return MaxWidth; } else {return img.width; } } function Close…
阅读更多...
html5 简单实例源代码

html5 简单实例源代码

实例教程&#xff1a;http://www.w3school.com.cn/jquery/ 源代码下载&#xff1a; http://download.csdn.net/detail/wyx100/9827067 html5文件布局结构 html5文件布局结构html5语言标记 浏览器执行效果 html5文件源代码 源代码下载&#xff1a; http://download.csdn.net/de…
阅读更多...
html实例，实现表单

html实例，实现表单

1.使用HTML完成下列功能 <!doctype html> <html><head><!-- <meta charset"GBK">--></head><body><table width"60%" border"3" align"center" bgcolor"#F0F8FF" borderColor…
阅读更多...
html导航栏纵向代码,html横向导航栏怎么做？横向导航条代码实例

html导航栏纵向代码,html横向导航栏怎么做？横向导航条代码实例

有不少小伙伴在刚学习 html 的时候都会遇到这样一个问题&#xff1a;html 横向导航栏怎么做&#xff1f;今天W3Cschool小编就为大家分享一下简单的横向导航条代码&#xff0c;相信会对大家有所帮助。 html 横向导航栏一般用两种方法来制作&#xff1a;第一种&#xff0c;我们使…
阅读更多...
html如何插入下拉菜單,html下拉菜单怎么做？html下拉菜单的代码实例介绍

html如何插入下拉菜單,html下拉菜单怎么做？html下拉菜单的代码实例介绍

本篇文章主要的介绍了关于HTML select标签下拉菜单的做法实例&#xff0c;还有一个html的一些网站的下拉菜单的用法都放在了文章中&#xff0c;下面就让我们一起来看看这篇文章吧 首先我们要知道html下拉菜单的代码是什么&#xff1f; 很明显是select元素可创建单选或多选菜单。…
阅读更多...
HTML代码示例和介绍

HTML代码示例和介绍

HTML基本的格式 <!DOCTYPE html> <!-- 声明文档。定义html --> <html lang"en"> <!-- 元素是页面的根元素 --> <head> <!-- 元素包含文档的元数据 --><meta charset"UTF-8"&g…
阅读更多...
STM32仿真器下载程序出现SWD/JTAG Communication Failure的解决方法

STM32仿真器下载程序出现SWD/JTAG Communication Failure的解决方法

一、解决办法&#xff1a;将STM32开发板断电&#xff0c;将板子上的BOOT0用短路帽接入3.3V高电平&#xff0c;重新插入仿真器&#xff0c;下载程序到开发板。不出意外可见程序烧录成功&#xff0c;此时将BOOT0接回低电平&#xff0c;后续烧录程序便不会出现SWD/JTAG Communicat…
阅读更多...
keil无法识别JTAG仿真器解决办法

keil无法识别JTAG仿真器解决办法

一、操作步骤 1、操作环境&#xff1a; 开发板&#xff1a;野火STM32H743XI 电脑系统版本&#xff1a;Windows 10 专业版 使用笔记本调试 JTAG&#xff1a;Fire-Debugger 野火 高速版DAP编程器 2、操作步骤&#xff1a; 将JTAG连接在STM32调试接口和电脑USB接口上&#xff0c…
阅读更多...
JTAG调试原理

JTAG调试原理

转自&#xff1a;https://blog.csdn.net/sinat_24088685/article/details/50980501 1.介绍 JTAG&#xff08;Joint Test Action Group&#xff0c;联合测试行动小组&#xff09; 是一种 国际标准测试 协议&#xff0c;主要用于 芯片内部测试 。现在多数的高级器件都支…
阅读更多...
MCU模拟JTAG接口对LATTICE CPLD FPGA 进行在线编程加载

MCU模拟JTAG接口对LATTICE CPLD FPGA 进行在线编程加载

完整版请点击　https://hifpga.com/问题/719 索取源码&#xff0c;向博主本人提问FPGA相关问题 作者&#xff1a;Rock.Ding&#xff08;莱迪思半导体公司&#xff09;关键字&#xff1a;MCU, JTAG, 在线编程, CPLD。 前言 CPLD(Complex Programmable Logic Device)复杂可编程…
阅读更多...
JTAG+SWD在Keil5中进行仿真

JTAG+SWD在Keil5中进行仿真

JTAGSWD在Keil5中进行仿真 上一章说了STM32的烧录问题&#xff0c;主要有slink、TTL-usb的方法&#xff0c;通过相应的烧录软件&#xff0c;进行一个下载烧录的过程&#xff0c;用到的模式也主要是SWD的模式&#xff0c;毕竟只有四根线比较方便。 这篇主要是仿真测试&#xff…
阅读更多...
【开发工具】【JTAG】JTAG调试原理【二】

【开发工具】【JTAG】JTAG调试原理【二】

相关链接&#xff1a; JTAG基础 JTAG调试原理 JTAG调试实例 模拟系统崩溃&#xff0c;使用JTAG调试找到崩溃点 JTAG调试原理 两个重要概念&#xff1a;边界扫描和TAP 边界扫描 JTAG如何用于芯片测试呢&#xff1f;　其中用到的最主要部件就是边界扫描链。 边界扫描&…
阅读更多...
STM32中使用J-Link仿真器选择JTAG模式和SWD模式的区别

STM32中使用J-Link仿真器选择JTAG模式和SWD模式的区别

0. 下载调试器(仿真器) 下载调试器是将PC(例如通过USB协议)发送的命令转换为MCU(负责MCU内部外围设备)理解的语言(例如SWD或JTAG协议)的设备&#xff0c;加载代码并精确控制执行。 1. J-Link J-Link是SEGGER公司为支持仿真ARM内核芯片推出的JTAG/SWD仿真器。配合IAR EWAR&am…
阅读更多...
ARM JTAG仿真器电路讨论

ARM JTAG仿真器电路讨论

一. JTAG仿真器的实质 JTAG (Joint Test Action Group) 编程调试实质上是利用了MCU/MPU片上自带的跟踪调试功能&#xff08;需MCU/MPU硬件支持&#xff09;。JTAG编程板一端与PC的并口相连&#xff0c;另一端连接至目标板&#xff0c;由于通常的MCU/MPU的工作电压在1.8V…
阅读更多...
JTAG和SWD调试器

JTAG和SWD调试器

文章目录 一、调试器二、JTAG三、SWD三、各自优缺点 一、调试器 当我们开发单片机程序时&#xff0c;通常是在Windows或Linux上进行代码编写和编译&#xff0c;但是单片机并不直接集成在电脑上&#xff0c;怎么验证我们的单片机程序是否正确并烧录到单片机中&#xff0c;此时就…
阅读更多...
JTAG基本原理及仿真器性能比较

JTAG基本原理及仿真器性能比较

转载自&#xff1a;http://www.gd-emb.org/detail/id-48408.html JTAG(Joint Test Action Group&#xff0c;联合测试行动组)是一种国际标准测试协议(IEEE 1149&#xff0e;1兼容)。标准的JTAG接口是4线——TMS、TCK、TDI、TDO&#xff0c;分别为模式选择、时钟、数据输入和数…
阅读更多...
JTAG、JLink、ULINK、ST-LINK仿真器区别

JTAG、JLink、ULINK、ST-LINK仿真器区别

首先要了解一下JTAG。 JTAG协议 JTAG&#xff08;Joint Test Action Group&#xff0c;联合测试行动小组&#xff09;是一种国际标准测试协议&#xff08;IEEE 1149.1兼容&#xff09;&#xff0c;主要用于芯片内部测试。现在多数的高级器件都支持JTAG协议&#xff0c;如AR…
阅读更多...
关于调试/仿真器的JTAG和SWD的使用==总结

关于调试/仿真器的JTAG和SWD的使用==总结

嵌入式行业&#xff0c;涉及到系统设计&#xff0c;难免要考虑这些接口的设计&#xff0c; 当前手上的一个项目&#xff0c;为了减小体积、节省资源&#xff0c;使用了stm32 swd接口&#xff0c;下面及此简要说明下常用的一些调试接口&#xff0c;&#xff0c;&#xff0c; 常…
阅读更多...
推荐文章

Copyright @ 2022~2023