Html5中Canvas绘图

最新推荐文章于 2025-07-28 09:06:26 发布
原创 最新推荐文章于 2025-07-28 09:06:26 发布 · 1.7k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html5 #api #canvas
本文介绍如何使用HTML5 Canvas API进行绘图，包括矩形、路径图形、圆形、扇形及文字和图片的绘制方法。

Canvas绘图

Canvas的基本API

制作矩形

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

      var cas = document.querySelector("canvas");

      //获取绘制环境

      var ctx = cas.getContext("2d");

      //填充颜色，如同更换画笔一般

      ctx.fillStyle = '#ff0';

      //绘制矩形

      ctx.fillRect(100,100,150,100);

      console.log(cas);

   </script>

</body>

</html>

使用路径绘制图形

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

      var cas = document.querySelector("canvas");

      //获取绘制环境

      var ctx = cas.getContext("2d");

      //路径开始

      ctx.beginPath();

      //路径规划

      ctx.moveTo(100,100); //移动画笔，没有路径线

      ctx.lineTo(200,100); //在画布上移动画笔，如同画画

      ctx.lineTo(100,200);

      ctx.lineTo(150,0);

      ctx.lineTo(200,200);

      ctx.lineTo(100,100);

      //路径结束

      ctx.closePath();

      //填充路径

      ctx.fillStyle = 'red';

      ctx.fill();

   </script>

</body>

</html>

效果图：

制作圆形、扇形

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

      var cas = document.querySelector("canvas");

      //获取绘制环境

      var ctx = cas.getContext("2d");

      //路径开始

      ctx.beginPath();

      //路径移动到圆心

      ctx.moveTo(100,100);

      //画一个整圆

      //ctx.arc(100,100,50,0,360);

      //根据传递的参数画图

      ctx.arc(100,100,50,0,getHuDu(120));

      //路径结束

      ctx.closePath();

      //填充路径

      ctx.fillStyle = 'red';

      ctx.fill();

      //获取弧度

      function getHuDu(hd){

         return hd*Math.PI/180;

      }

   </script>

</body>

</html>

效果图：

制作文字

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

      var cas = document.querySelector("canvas");

      //获取绘制环境

      var ctx = cas.getContext("2d");

      //绘制文字

      ctx.font = '20px 宋体';

      ctx.align = 'center';

      ctx.fillText('午_夜博客',200,150);

   </script>

</body>

</html>

 效果图：

绘制图片

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

      var cas = document.querySelector("canvas");

      //获取绘制环境

      var ctx = cas.getContext("2d");

      //获取图片

      var img = new Image();

      img.src = 'img/te.png';

      img.onload = function(){

         //绘制图片

         ctx.drawImage(img,0,0,500,300);

      }

   </script>

</body>

</html>

效果图：


【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4986
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
探索HTML Canvas：创意绘图与网页美化（秒懂网页Canvas绘图）
百赢出品，必属精品
04-08 2667
canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。Canvas是HTML5提供的一个元素，用于通过JavaScript绘制图形。绘制图形：Canvas可以绘制各种形状、线条、文本和图像，使开发者能够灵活地创建图形效果。动态更新：Canvas提供了API，开发者可以通过JavaScript动态更新画布上的图形，实现实时的数据可视化和动画效果。高性能。
HTML5系列（4）--Canvas 绘图详解
欢迎来到这里，希望文章能对你有所帮助
12-01 1512
HTML第五站
Canvas学习记录
小康博客
09-14 536
Canvas的基本用法 canvas元素 <canvas id="tutorial" width="150" height="150"></canvas> canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。 该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
HTML5 canvas绘图基本使用方法
热门推荐
诗渊的博客
06-26 7万+
本文介绍了html5 中canvas标签的基本使用方法，详细讲解了其重要的属性和方法
HTML5Canvas绘图（上）
最好的一天
11-26 1万+
1.Canvas绘制步骤 在html5页面中添加canvas元素，定义id属性值以便后面调用            &lt;canvas id="myCanvas" width="500" height="200"&gt;&lt;/canvas&gt; 使用id寻找页面中的canvas元素           var c=document.getElementById("myCanvas");
HTML5 Canvas绘图
It_sharp的博客
01-14 801
Canvas标签 HTML5 标签用作绘图的容器，使用JS脚本来完成绘图。 如下代码可以获取绘制上下文，类似于C#中的Graphics g = e.Graphics获取画布 var c = document.getElementById(&amp;amp;quot;Canvas&amp;amp;quot;); var ctx = c.getContext(&amp;amp;quot;2d&amp;amp;quot;); 绘制的对象有文本、线条、矩形、圆形等
HTML5中canvas绘图基础详解
输入知识，消化知识，输出知识，分享知识，教人让我学习更好，业精于勤荒于嬉，行成于思毁于随
09-08 2742
H5中新增了重要元素canvas,通过绘制任意图形，借助自带API，通过编写js可以控制各种图形，制作动画效果，对web具有划时代意义。
【Web】HTML5 Canvas 2D绘图的封装
巽的博客
03-12 1725
(原文写自2024年10月9日，整理笔记所以现在发出)HTML5 Canvas并不是一项很新的技术了，但是作为一名业余程序员，我是不需要考虑新旧技术和投入实际生产的问题，相反，我只需要考虑有趣，什么有趣搞什么。在Godot中玩味了一圈CanvasItem的绘图函数，也慢慢补齐了一点三角函数、向量和线性变换的基础之后，发现绘图才是程序中最有意思的内容。关于Canvas的2D绘图指令，确实没有必要重复讲述，有很好的文章和在线文档讲述这些内容。
html5 canvas 隐藏边框,HTML5 Canvas 绘图
weixin_42253260的博客
06-03 1045
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。1、使用Canvas绘制直线：XML/HTML Code复制内容到剪贴板html>canvas{border:dashed2px#CCC}function$$(id)...
HTML5之Canvas绘图——使用Canvas绘制图形
csdn_chenli
06-16 1369
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程 HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 Canvas绘制一个加载的动画图片
HTML5 Canvas绘图与交互技术详解
最新发布
weixin_36019375的博客
07-28 761
在 canvas 中，fillStyle属性用于定义图形的内部颜色。当你使用fill()方法绘制图形时，fillStyle属性的值将被应用到图形的填充上。// 设置填充颜色为红色// 使用 fill() 方法填充一个矩形在这个例子中，我们首先将fillStyle设置为'red'，然后使用fillRect方法绘制了一个填充了红色的矩形。你可以为fillStyle指定十六进制颜色、RGB、RGBA 或者预定义的颜色名称。lineWidth属性用于设置线条的宽度，而。
HTML5关键知识点之Canvas绘图深度剖析
2301_78506709的博客
05-20 5475
本文深入探讨了HTML5中Canvas绘图的关键知识点。首先，文章指出目前尚无标准化的3D canvas，但未来HTML5可能引入相关标准。接着，详细介绍了绘制矩形的属性和方法，包括fillStyle、fillRect、strokeStyle、strokeRect和clearRect的使用。此外，文章还解释了如何通过调整canvas的宽度或高度来重置其状态，并阐述了Canvas的二维坐标系和路径绘制方法，如moveTo和lineTo。最后，文章通过表格形式总结了这些知识点，强调了它们在Canvas绘图中的重
HTML5 Canvas 绘图应用安装与配置指南
gitblog_00007的博客
04-22 864
HTML5 Canvas 绘图应用安装与配置指南 1. 项目基础介绍 本项目是一个基于 HTML5 Canvas 的绘图应用，它允许用户使用触摸或鼠标在屏幕上进行绘画。该应用能够在 iOS、Android、Windows Phone 以及各种桌面浏览器上运行。项目主要使用 JavaScript 编写，利用了 HTML5 的 Canvas API 实现绘图功能。 2. 项目使用的关键技术和框架 H...
HTML5关键知识点之Canvas绘图全解析
2301_78506709的博客
05-20 4816
本文全面解析了HTML5中的Canvas绘图技术，涵盖了<canvas>元素的基本定义、浏览器支持情况、元素外观与获取方法以及绘制简单图形的步骤。文章首先介绍了<canvas>元素作为位图画布的作用，并指出其依赖JavaScript进行图形绘制。接着，详细说明了主流浏览器对<canvas>的支持情况，特别提到IE浏览器需要第三方库的支持。文章还讲解了如何通过添加id属性并使用document.getElementById()方法获取<canvas>元素，以及如
使用 HTML5 canvas 进行 Web 绘图
wjlgryx的专栏
03-17 584
简介： 新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用，以顺应当前 SaaS，云计算以及 RIA 等技术的最新趋势。在 HTML5 得以广泛推广之前，开发人员通常使用 SVG，VML 等技术进行 Web 绘图操作，但这些基于 XML 的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如 Web 游戏所需要的像素级别的绘图能力。HTML5 canvas 元...
java canvas详解_HTML5的canvas绘图技术详解
weixin_39962199的博客
02-16 962
原标题：HTML5的canvas绘图技术详解本篇教程探讨了HTML5的canvas绘图技术详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合Java代码可以绘制各种图形和图像以及动画效果。1.1 浏览器不兼容问题ie9以上...
HTML5绘图 笔记1：HTML5 canvas基础
YanHSama的博客
02-02 333
在页面中插入canvas元素 HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。 注意: 默认情况下 元素没有边框和内容。 <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas> 绘制...
HTML5 Canvas 绘图应用项目教程
gitblog_01060的博客
04-21 898
HTML5 Canvas 绘图应用项目教程 1. 项目的目录结构及介绍 该项目包含以下目录和文件： lib/：存放项目依赖的库文件，如 jQuery 和 jQuery Mobile。 LICENSE：项目使用的 MIT 许可证文件。 README.md：项目说明文件，包含项目介绍和演示链接。 index.html：项目的主要页面文件，实现基础的 HTML5 Canvas 绘图功能。 index_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值