由于工作的需求，促进我学习html5 canvas技术，canvas是html5最强大的元素之一。使用它可以在浏览器中做一番奇妙的事情。大家或多或少都听过canvas的强大用处，我这里就不再赘述了。

canvas的强大功能是通过canvas的context对象表现出来的，该环境变量是可以从canvas元素身上获取。

下面先看一个canvas的例子方便讲解；在canvas上显示一个字符串，该字符串大致与canvas水平垂直居中。代码如下：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title> canvas </title>

    <style type="text/css">

        body {background:#DDD;}

        #canvas {margin:10px; padding:10px;background:#FFF;border:thin inset #AAA;}

    </style>

</head>

<body>

    <canvas id="canvas" width="600" height="300">

        canvas not supported

    </canvas>

</body>

</html>

在上述的html代码中还使用了css对canvas来设置相应的背景色等其他css属性。所以canvas跟其它的div，h1等元素一样可以设置css样式。canvas有趣的不是在于其可以设置才算是样式，而是在于javascript代码，下面我上述的html中的canvas写程序了。代码如下：

<script type="text/javascript">

    var canvas = document.getElementById('canvas'),

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

    context.font = '38pt Arial';

    context.fillStyle = 'cornflowerblue';

    context.strokeStyle = 'blue';

    context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);

    context.strokeText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);

</script>  

上面的javascript代码主要有三步：
1.使用document.getElementById方法获取canvas元素。
2.在canvas对象上调用getContext('2d')方法，获取绘图环境变量
3.使用绘图环境对象在canvas元素上进行绘制。

fillStyle与strokeStyle是指定图形填充，路径描边时所使用的颜色，渐变或图案。

fillText()和strokeStyle都需要3个参数：要绘制的文本内容，以及在canvas中显示文本的横纵坐标。

ps：在是设置canvas的宽度和高度的时，不能使用px后缀，虽然很多浏览器支持使用px后缀，但是从技术上来说不被canvas规范接受，而且这些取值只能是非负数。

在给canvas设置宽高的时候，有两种方法：一是直接给canvas的width和height指定属性值；二是在css中设置width和height。但是，这种设置会产生意外的效果。这里就引出了，canvas元素的大小与绘图表面的大小。如图：

蒙了吧，两个元素大小一样，绘制的图却不同。其实主要是修改width和height属性来设置canvas元素的大小，这样的话，元素自身与绘画表面的大小都会被设置成属性值。而通过css来设置的width和height值只是修改了元素的大小并没有修改绘画表面的大小，因此，浏览器会将绘画表面从默认值（300*150）拉伸到修改后的值（600*300）。

canvas是个很强大的元素，我现在所知道的只是认识canvas这个元素，需要学习的还很长，day day up吧。

canvas学习日记一的更多相关文章

  1. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  2. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  3. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  4. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  5. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  6. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...

  7. android学习日记03--常用控件checkbox/radiobutton

    常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...

  8. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  9. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

随机推荐

  1. RMI原理及简单demo

    1 简介 RMI是远程方法调用的简称,它能够帮助我们查找并执行远程对象的方法.通俗地说,远程调用就象将一个class放在A机器上,然后在B机器中调用这个class的方法. 2 概念 其他机器需要调用的 ...

  2. Django模型层

    ORM简介: MVC或者MTV框架中包括一个重要的部分就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人员的工 ...

  3. 1.Linux下生成密钥

    1.Linux下生成密钥 ssh-keygen的命令手册,通过”man ssh-keygen“命令: 通过命令”ssh-keygen -t rsa“ 生成之后会在用户的根目录生成一个 “.ssh”的文 ...

  4. 导出文件名带时间信息的dmp文件

    exp system/orcl@orcl owner=aixm file=d:\aixm%date:~0,4%%date:~5,2%%date:~8,2%_%time:~0,2%%time:~3,2% ...

  5. Win8电源选项中没有休眠这一项如何让Win8也能够休眠

    我们都知道,Win8默认的电源选项中是没有休眠这一选项的,即使用Alt+F4打开关闭Windows选项窗口也看不到”休眠“.难道Win8就不能够休眠了吗?答案当然不是,我们只要进行一些设置就能让Win ...

  6. 语义分析：C语言表达式的语法树生成——Python实现

      令狐冲慢慢走近,那汉子全身发抖,双膝一屈,跪倒在雪地之中.令狐冲怒道:“你辱我师妹,须饶你不得.”长剑指在他咽喉之上,心念一动,走近一步,低声问道:“写在雪人上的,是些什么字?”   那汉子颤声道 ...

  7. 「小程序JAVA实战」小程序的表单组件（25）

    转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...

  8. Balls(poj 3783)

    The classic Two Glass Balls brain-teaser is often posed as: “Given two identical glass spheres, you ...

  9. 如何设置tomcat，直接通过IP 访问

    找到tomcat的主目录,进入conf文件夹,找到server.xml文件,并打开:   修改tomcat的监听端口为80端口: 在server.xml文件中找到: <Connector por ...

  10. awk 数据处理小技巧

    进行数据分析或统计时,如果数据量较小,我们可以用awk快速处理,以下是一些小技巧   一.时间戳转换 日期转时间戳: date -d "20150315"  "+%s&q ...