HTML5之帆布(canvas)(二)
HTML5之帆布(canvas)(二)
博为峰教研组 发表于10个月前
HTML5之帆布(canvas)(二)
  • 发表于 10个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

· 一个页面可以有多个画布,但是要为每个画布指定唯一的ID

· 默认情况下,画布是透明的

在画布上绘图

接下来我们开始在画布上绘制一个矩形。要画这个矩形,首先要确定矩形的位置,其次是矩形的大小。这里把矩形画在X = 10像素,Y = 10像素的位置,让它的高度和宽度都等于100像素。

· 1.首先获得画布元素的引用

· 2.获取画布的一个“2D”上下文

· 3.使用这个上下文莱绘制图像

<!DOCTYPE HTML>

<html>

<head>

    <title>Look what I Drew</title>

    <meta charset="utf-8">

    <style>

        canvas{

            border: 1px solid black;

        }

    </style>

 

    <script>

        window.onload = function () {

            //在画布上画个矩形

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

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

            context.fillRect(10,10,100,100);

        };

    </script>

</head>

 

<body>

    <canvas id="draw" width="600" height="200"></canvas>

</body>

</html>

失败处理

因为画布是HTML5中新增的特性,所以会遇到有些浏览器不支持的情况,这是我们就需要查看画布对象中是否存在的getContext方法:

<script>

    window.onload = function () {

        //在画布上画个矩形

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

        //判断浏览器是否支持Canvas

        if (canvas.getContext) {

            console.info("you hava canvas");

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

            context.fillRect(10,10,100,100);

        } else {

            console.info("soory, no canvas support ApI");

        }

 

 

    };

</script>

此外我们还可以这样做:

<canvas id="draw" width="600" height="200">Please upgrade your browser!</canvas>

只要浏览器看到不认识的元素,默认行为就显示其中包含的文本。所以,不支持帆布浏览的器看到<canvas>元素时,它们就会显示请升级浏览器!另一方面,支持画布的浏览器会直接忽略画布标记之间的所有文本,所以不会显示这个文本。

 

共有 人打赏支持
粉丝 40
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: