学了一点基础知识，感觉好神奇，全部练习代码

<html>

    <head>

        <meta http-equiv=Content-Type content="text/html;charset=utf-8">

        <title>Canvas element size:  x , Canvas drawing surface size:  x </title>

        <style>

            body {

                background: #dddddd;

            }

            #canvas {

                margin: 10px;

                padding: 10px;

                background: #ffffff;

                border: thin inset #aaaaaa;

            }

            #canvas2 {

                margin: 10px;

                padding: 10px;

                background: #ffffff;

                border: thin inset #aaaaaa;

                width: ;

                height: ;

            }

      </style>

    </head>

    <body>

        <canvas id='canvas' width='' height=''>

            Canvas not supported

        </canvas>

        <br/>

        .canvas有两个大小，一个是元素本身的大小，一个是绘图的大小.<br/>

        canvas默认绘图大小300,.设置CSS元素后，会将图像拉伸<br/>

        <canvas id='canvas2' class='canvas2' ><br/>

            Canvas not supported

        </canvas>

        <br/>

        .canvas的toDataURL(type,质量)返回图像路径，可以作为img的src显示。<br/>

        <img id='img2' src=""><br/>

        .canvas.getContext()方法返回canvasRenderingContext2D对象，属性和方法<br/>

        <a href='http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp' target='_blank'>点这里！</a>

    </body>

    <SCRIPT TYPE="text/javascript">

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

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

        context.font = '38pt Arial';

        context.fillStyle = '#a1a1a1';//字体填充的颜色

        context.strokeStyle = 'red';//字体描边颜色

        context.fillText("Hello Canvas", canvas.width /  - ,

            canvas.height /  + );

        context.strokeText("Hello Canvas", canvas.width /  - ,

            canvas.height /  + );

        //alert(canvas.toDataURL("",1));

        var image = canvas.toDataURL("image/png",0.1);//返回图像

        document.getElementById("img2").src=image;//指定图像

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

            context2 = canvas2.getContext('2d');

        context2.font = '38pt Arial';

        context2.fillStyle = '#a1a1a1';//字体填充的颜色

        context2.strokeStyle = 'red';//字体描边颜色

        context2.fillText("Hello Canvas", canvas2.width /  - ,

            canvas2.height /  + );

        context2.strokeText("Hello Canvas", canvas2.width /  - ,

            canvas2.height /  + );

    </SCRIPT>

</html>

准备在石家庄从事HTML5游戏开发

Canvas标签初探的更多相关文章

  1. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  2. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  4. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  5. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  6. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  7. canvas标签的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML5的canvas标签制作黑客帝国里的简单画面

    1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...

  9. JS canvas标签动态绘制图型

    使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

随机推荐

  1. C/C++ 用libcurl库进行http通讯网络编程

    C/C++ 用libcurl库进行http通讯网络编程 目录索引: 一.LibCurl基本编程框架 二.一些基本的函数 三.curl_easy_setopt函数部分选项介绍 四.curl_easy_p ...

  2. CentOs文件实时同步

    1,生成数据序

  3. Hibernate 、多表关联映射 - 一对一关系映射（one- to-one）

    hibernate.cfg.xml: <hibernate-configuration> <session-factory name="sessionFactory&quo ...

  4. fs.rename可以重新写入文件

    fs.rename可以重新写入文件 用法 fs.rename(旧path,新path,callback)可以重新写入文件 引用地址 http://www.jb51.net/article/58548. ...

  5. Python实现Hadoop MapReduce程序

    1.概述 Hadoop Streaming提供了一个便于进行MapReduce编程的工具包,使用它可以基于一些可执行命令.脚本语言或其他编程语言来实现Mapper和 Reducer,从而充分利用Had ...

  6. DB Query Analyzer 5.04 is released, 63 articles concerned have been published

    DB Query Analyzer 5.04 is released, 63 articles concerned have been published DB QueryAnalyzer is pr ...

  7. CentOS6.3 下启动Oracle service和listener

    一.启动Oracle数据库和监听器 首先切换到Oracle专有用户: [root@NJZYY06 ~]# su - oracle [oracle@NJZYY06 ~]$ 1.启动数据库: [oracl ...

  8. JAVA 类加载器 第14节

    JAVA 类加载器 第14节 今天我们将类加载机制5个阶段中的第一个阶段,加载,又叫做装载.为了阅读好区分,以下都叫做装载. 装载的第一步就是要获得二进制的字节流,它可以从读.class文件获得,也可 ...

  9. can't find which disk is full

    df -lh lsof | grep delete $program_id df -lh # 搞定问题

  10. QF——网络之网络请求的几种方式，图片缓存

    同步请求和异步请求: 同步请求会阻塞主线程:不会开启新的线程,还是主线程,所以直到请求成功后,才能执行其它操作. 异步请求不会阻塞主线程.开启新的线程去请求服务器,而不影响用户的交互操作等其他动作. ...