HTML5初识Canvas
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Canvas示例</title>

    <!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

</head>

<body>

    <p>Canvas的用途：</p>

    <p>动态生成和展示图形、图表、图像以及动画</p>

    <p>性能非常好：不需要将所绘制的图像中的每个图元当做对象存储。API相对简单</p>

    <p>canvas默认会创建一块矩形区域 默认尺寸 300 X 150(px)</p>

    <p>canvas的坐标默认是0,0 也叫原点</p>

    <p>canvas也可以通过css的方式增加边框、内边距、外边距等</p>

    <p>现在的大部分浏览器已经支持canvas<br /> 
老版本的IE不支持，可以使用一个js库来做兼容：explorercanvas.js <br> 
js库地址：https://github.com/arv/ExplorerCanvas

    </p>

    <canvas id="test" style="border:1px solid;" width="200" height="200">

        当浏览器不支持canvas时会显示这段文字，这里还可以使用图片代替

    </canvas>

    <script>

        function drawTest() {

            //获取canvas元素及绘图上下文对象

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

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

            //用绝对坐标来创建一条路径

            context.beginPath();

            context.moveTo(70, 140);

            context.lineTo(140, 70);

            context.stroke();

        }

        window.addEventListener("load", drawTest, true);

    </script>

</body>

</html>

HTML5初识Canvas的更多相关文章

  1. [html5] 初识绘图canvas

    这个星期被调到别的项目组专门做了一会儿前端,没办法,人太少,我也只能硬着头皮上... 说起来,html5的canvas真的好用,可以画色块,可以嵌入图片,可以通过定位在图片上写字等等 举例如下 在ht ...

  2. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  5. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  6. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  7. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  8. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. javaweb基础(36)_jdbc进行批处理

    在实际的项目开发中,有时候需要向数据库发送一批SQL语句执行,这时应避免向数据库一条条的发送执行,而应采用JDBC的批处理机制,以提升执行效率. JDBC实现批处理有两种方式:statement和pr ...

  2. P3740 贴海报

    P3740 贴海报 很显然,这个题是让我们维护一个区间的信息 可以考虑线段树.可是这个题,正向思维可能并不可做. 所以我们考虑逆向思维. 打个比方,你是一名保洁人员.面对已经粘在墙上的,大大小小的广告 ...

  3. 第6章 新建工程-寄存器版—零死角玩转STM32-F429系列

    第6章     新建工程—寄存器版 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...

  4. HDU.2111 Saving HDU(贪心)

    题目来源:Saving HDU 题意分析: XHD有个容量为v的口袋,有n个宝贝,每种宝贝的价值不一样,每种宝贝单位体积的价格也不一样,宝贝可以分割,分割后的价值和对应的体积成正比.求XHD最多能取回 ...

  5. tomcat日志切割脚本

    tomcat日志每俩小时切割的脚本如下(这是用定时任务来完成的,此方法无需重启tomcat): time=$(date +%H) end_time=`` a=$end_time BF_TIME=$(- ...

  6. Linux常见文件管理命令

    1.Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示.(1)目录管理命令——ls:列出指定目录下的内容格式:ls [OPTION]... [FILE]... -a:显示所有文件包 ...

  7. TP5 行为Behavior用法说明

    TP5 行为Behavior用法说明 无论是tp3还是在tp5中,行为都是一个非常重要的概念,关于太多的理论知识,就不多说了,不了解的请查看开发文档:TP5 行为概述 以下,就由代码来一步一步实现行为 ...

  8. yii2邮箱发送

    yii2 邮件发送  163邮箱 1.在配置文件main-local.php components=>[]里面配置 'mailer' => [ 'class' => 'yii\swi ...

  9. jquery 配合 ajax 完成 在线编辑 你值得拥有

    思路分析: 将 table中的表格 改变成为 input表格框获得值 ajax配合修改 删除 <?php use yii\helpers\Url; $web = Url::base(); ?&g ...

  10. Head First Java-图形化界面

    Head First Java是本挺好的书,讲的比较清楚和简单.主要看原则.概念啥的.语法什么的,还是靠谷歌吧:) 这部分的笔记也有很多了,最近会努力更新和搬运.顺便自己也重新读一下. 就酱.想要这本 ...