文档章节

HTML5之帆布(canvas)(二)

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

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

Spring中static变量不能@value注入的原因

今天本想使用@Value的方式使类中的变量获得yml文件中的配置值,然而一直失败,获得的一直为null。 类似于这样写的。 public class RedisShardedPool { private static ShardedJedisPool pool...

钟然千落
16分钟前
0
0
CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部