HTML5 canvas中如何绘制图像


本文摘自PHP中文网,作者不言,侵删。

canvas是HTML5中新增的画布,那么HTML5 canvas如何绘制图像呢?本篇文章就来给大家介绍关于HTML5 canvas绘制图像的方法,下面我们来看具体的内容。

HTML5 canvas

我们先来直接看代码示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title></title>

  <meta charset="utf-8" />

  <script type="text/javascript">

    function draw() {

      var canvas = document.getElementById('SimpleCanvas');

      if (!canvas || !canvas.getContext) {

        return false;

      }

      var context = canvas.getContext('2d');

      var img = new Image();

      img.onload = function onImageLoad() {

        context.drawImage(img, 128, 40);

      }

      img.src = 'img/flower.jpg';

    }

  </script>

</head>

<body onload="draw()" style="background-color:#D0D0D0;">

  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>

  <div>Canvas Demo</div>

</body>

</html>

说明:在画布上绘图时,获取画布的上下文是一个常见的过程。

阅读剩余部分

相关阅读 >>

HTML5 如何做到application cache?离线储存技术的简要说明

HTML5程序员需要学习的技能总结

h5的文本格式化使用方法

HTML5之pushstate和popstate操作history无刷新改变当前url的详细介绍

HTML5标准学习-文档结构详解

h5中meta标签及作用

HTML5如何实现简单进度条效果?动态进度条的实现(代码示例)

mui框架使用HTML5实现二维码扫描功能

详解HTML5之pushstate、popstate操作history无刷新改变当前url代码实例

HTML5的深入了解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...