当前位置：网站首页>《canvas》之第1章 canvas概述

《canvas》之第1章 canvas概述

2022-06-24 06:44:00 【yxqq378287007】

《canvas》之第1章 canvas概述

第1章 canvas概述

1.1 canvas是什么

1.1.1 canvas简介

canvas（画布），html5中，canvas元素结合JavaScript绘制各种图形。

  • 绘制图形(矩形、曲线、圆等)
  • 绘制图表
  • 动画效果
  • 游戏开发

1.1.2 canvas与SVG

  • canvas使用JavaScript动态生成，SVG使用XML静态描述。
  • canvas基于位图，适用于像素和动态渲染，放大会失真；SVG基于矢量，适用静态描述，放大不会失真。
  • 发生修改，canvas需要重绘，SVG不需要。
  • 类似美术与几何的关系。

1.2 canvas元素

htaml5中使用canvas元素绘制图形三步骤：

  1. 获取canvas对象。
  2. 获取上下文环境对象context。
  3. 开始绘制图形。
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript"> window.onload = function () {
       //1、获取canvas对象 var cnv = document.getElementById("canvas"); //2、获取上下文环境对象context var cxt = cnv.getContext("2d"); //3、开始绘制图形 cxt.moveTo(50, 100); cxt.lineTo(150, 50); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

1.2.1 canvas元素简介

行内块元素（inline-block），一般需指定3个属性，id、width（默认300px）和height（默认150px）。
实际开发中，width和height应该在HTML属性中定义，不要在CSS样式中定义。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css"> canvas {
       width: 200px; height: 150px; } </style>
    <script type="text/javascript"> window.onload = function () {
       var cnv = document.getElementById("canvas"); var str = "canvas的宽度为：" + cnv.width + "，高度为：" + cnv.height; alert(str); //无法获取CSS中width和height，使用默认值300，150。 } </script>
</head>
<body>
    <canvas id="canvas" style="border:1px dashed gray;"></canvas>
</body>
</html>

1.2.2 canvas对象

  • 常用属性
    width、height
  • 常用方法
    getContext(“2d”)，获取Canvas 2D上下文环境对象（context对象）
    toDataURL()，获取canvas对象产生的位图的字符串
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript"> window.onload = function () {
       var cnv = document.getElementById("canvas"); var str = "Canvas的宽度为：" + cnv.width + "，高度为：" + cnv.height; alert(str); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" style="border:1px dashed gray"></canvas>
</body>
</html>

解惑

  • html5 canvas暂时只提供2D绘图API，3D绘图使用html5中WebGL实现。
  • IE9及以上版本支持html5 canvas，IE7及IE8兼容性通过explorercanvas扩展解决，会有许多功能限制，无无法使用fillText()方法等。
<!--[if IE]> <script src="https://github.com/arv/explorercanvas/excanvas.js"></script> <![end if]-->
  • 推荐canvas教程。
    W3C官网：www.w3.org/TR/2dcontext/
原网站

版权声明
本文为[yxqq378287007]所创，转载请带上原文链接，感谢
https://blog.csdn.net/oqqyx1234567/article/details/125249412

边栏推荐

猜你喜欢

随机推荐