HTML5 - Canvas画布

HTML5 - Canvas画布 首页 / HTML5入门教程 / HTML5 - Canvas画布

HTML5元素<canvas>为您提供了一种使用JavaScript绘制图形的简单有效的方法。 它可以用来绘制图形,制作照片或做简单的动画。

这是一个简单的<canvas>元素,它只有两个特定的属性width和height以及所有核心HTML5属性,例如id,name和class等。

<canvas id="mycanvas" width="100" height="100"></canvas>

您可以使用getElementById()方法轻松地在DOM中找到<canvas>元素,如下所示:

var canvas=document.getElementById("mycanvas");

让无涯教程看一个在HTML5文档中使用<canvas>元素的简单示例。

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id="mycanvas" width="100" height="100"></canvas>
   </body>
</html>

这将产生以下输出-

渲染上下文

canvas最初是空白的,并且要显示某些内容,脚本首先需要访问渲染上下文并在其上进行绘制。

canvas元素具有一个称为 getContext 的DOM方法,用于获取渲染上下文及其绘图函数。此函数采用一个参数,即 2d 的类型。

以下是获取所需上下文的代码,以及检查您的浏览器是否支持<canvas>元素-

var canvas =document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx=canvas.getContext('2d');   
   //drawing code here   
} else {   
   
   //canvas-unsupported code here 
}  

浏览器支持

Firefox,Safari,Chrome和Opera的最新版本均支持HTML5 Canvas,但IE8本身不支持canvas

您可以使用 ExplorerCanvas 通过Internet Explorer获得画布支持。您只需要按如下方式包含此JavaScript-

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

Canvas 示例

Sr.No.Examples & Remark
1 Drawing Rectangles

了解如何使用HTML5 canvas元素绘制矩形

2 Drawing Paths

了解如何使用HTML5 canvas元素中的路径制作形状

3 Drawing Lines

了解如何使用HTML5 canvas元素绘制线条

4 Drawing Bezier

了解如何使用HTML5 canvas元素绘制Bezier曲线

5 Drawing Quadratic

了解如何使用HTML5 canvas元素绘制二次曲线

6 Using Images

了解如何将图像与HTML5 canvas元素一起使用

7 Create Gradients

了解如何使用HTML5 canvas元素创建渐变

8 Styles and Colors

了解如何使用HTML5 canvas元素应用样式和颜色

9 Text and Fonts

了解如何使用不同的字体及其大小绘制精美的文字。

10 Pattern and Shadow

了解如何绘制不同的图案和阴影。

11 Canvas States

了解在画布上进行复杂绘图时如何保存和恢复画布状态。

12 Canvas Translation

此方法用于将画布及其原点移动到网格中的其他点。

13 Canvas Rotation

此方法用于围绕当前原点旋转画布。

14 Canvas Scaling

此方法用于增加或减少画布网格中的单位。

无涯教程网

15 Canvas Transform

这些方法允许直接对转换矩阵进行修改。

16 Canvas Composition

此方法用于遮盖画布的某些区域或清除部分。

17 Canvas Animation

了解如何使用HTML5 canvas和JavaScript创建基本动画。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

软件测试52讲 -〔茹炳晟〕

从0开始学大数据 -〔李智慧〕

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

Redis核心技术与实战 -〔蒋德钧〕

体验设计案例课 -〔炒炒〕

操作系统实战45讲 -〔彭东〕

陈天 · Rust 编程第一课 -〔陈天〕

说透低代码 -〔陈旭〕

手把手带你写一个MiniSpring -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)