由于工作的需求,促进我学习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. 卷积神经网络之VGG网络模型学习

    VGG:VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNITION 牛津大学 visual geometry group(VG ...

  2. 【学习笔记】Markdown入门

    Markdown入门 最近把博客园的编辑器换成了Markdown.   语法入门 Markdown确实好用,本来我想总结一下常用Markdown的语法,但有下面这篇文章在,我实在是不敢画蛇添足了. 基 ...

  3. java传递是引用的拷贝,既不是引用本身,更不是对象

    java传递是引用的拷贝,既不是引用本身,更不是对象 2008-09-16 04:27:56|  分类: Java SE|举报|字号 订阅     下载LOFTER客户端     1. 简单类型是按值 ...

  4. 给Array本地对象增加一个原型方法,它用于删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组

    Array.prototype.removeCount=function(){ var that=this; var arr=[]; for(var i=0;i<that.length;i++) ...

  5. Linux内核系统调用列表

    一.进程控制: fork 创建一个新进程 clone 按指定条件创建子进程 execve 运行可执行文件 exit 中止进程 _exit 立即中止当前进程 getdtablesize 进程所能打开的最 ...

  6. MyBatis 学习记录4 MyBatis的一级缓存

    主题 分享记录一下MyBatis的一级缓存相关的学习. Demo public static void firstLevelCache() { init("mybatis-config.xm ...

  7. flex 设置换行flex-wrap

    flex 设置flex-wrap 换行 本来预想的正常情况下,代码应该如下: ul { width: 100%; display: flex; flex-wrap: wrap; li { ; widt ...

  8. Centos7 配置

    参考文章: http://www.hksilicon.com/kb/articles/594621/CentOS-7 1. 查看时区是否正确timedatectl,若不正确则设置时区 timedate ...

  9. 用django框架开发一个B2C购物网站的基本流程和用到的知识点总结1

    开发流程 开发模式采用前后端分离模式,作为后端开发人员我们只关注后端业务逻辑开发: 省略项目框架搭建文件的配置部分.... 一:用户部分 在项目开发中我们要用到用户模型类User,Django认证系统 ...

  10. Django中的DRF框架视图集使用

    1. 两个基类 1)APIView Django REST_framework 中所有视图的基类是APIView   父类是View 支持定义的属性: authentication_classes 列 ...