文档章节

HTML5之帆布(canvas)(二)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 11:20
字数 428
阅读 5
收藏 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>元素时,它们就会显示请升级浏览器!另一方面,支持画布的浏览器会直接忽略画布标记之间的所有文本,所以不会显示这个文本。

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 0
黄浦
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令。 在ng-repeat模板实例内部会暴露出一些特殊属...

孟飞阳
41分钟前
1
0
URLEncoder和URLDecoder

public static void main(String[] args) { String str1 = "https://test1-life.pingan.com/ilifecore/productMall/loading.html?productId=8000000241&channelCode=XCX00001&productCode=00......

鬼才王
51分钟前
2
0
对象及变量的并发访问-第一篇

方法内部的变量为线程安全变量 “非线程安全”问题存在于“共享变量”中,如果是方法内部的私有变量,则不存在“非线程安全”问题,所得结果也就是“线程安全”的。 package chaprer3;/**...

简心
51分钟前
1
0
程序媛眼中的程序猿原来是这样子的!

一直都想写一篇关于描述程序员的文章,但是一直没能开头,一来因为文笔不好,更主要的原因是貌似对程序员既熟悉又不熟悉,很怕写出来的是以偏概全,给大家造成对程序员的既定印象,不过,管他...

Java小铺
今天
1
0
bean标签

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 bean标签 bean标签中的init-method属性,该属性...

凯哥学堂
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部