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

<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. matlab中文论坛视频谷普教程MATLAB压缩包介绍

    matlab中文论坛视频谷普教程MATLAB压缩包介绍 我也正在学习这个软件 ,看到这个教程就在这里分享了,希望大家喜欢!Matlab 初学者视频教学1. Matlab视频:Matlab中文论坛为新手 ...

  2. 验证身份证合法性的js

    分别对15和18位的身份证号进行验证,非常严格. function idCardNo(value){ //验证身份证号方法 : : : : : : : : : : : : : : : : : : : ...

  3. pagespeed 安装（chrome版和firefox版）

    原文地址:http://blog.sina.com.cn/s/blog_6c9da636010103va.html pagespeed  让你的网站页面打开速度飞起来! 1.firefox版本下的安装 ...

  4. stdin、stdout、stderr

    1 ferror 2 stdin 3 stdout 4 stderr 1 ferror 功能:检测文件是否出现错误 返值:未出错0,出错非0 说明:每次调用文件输入输出函数,均产生一个新的ferror ...

  5. windows开机启动nginx

    1 .http://www.cuplayer.com/player/PlayerCode/Nginx/2014/0919/1577.html 2. http://www.cnblogs.com/xus ...

  6. python 生成器理解

    通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面绝大多数元素 ...

  7. 楼天城楼教主的acm心路历程（作为励志用）

    楼主个人博客:小杰博客 利用假期空暇之时,将这几年GCJ,ACM,TopCoder 參加的一些重要比赛作个 回顾.昨天是GCJ2006 的回顾,今天时间上更早一些吧,我如今还清晰记得3 年 前,我刚刚 ...

  8. 【转】HtmlAgilityPack 之 HtmlNode类

    [转]HtmlAgilityPack 之 HtmlNode类 HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 ...

  9. .net通用权限框架B/S (四)--DAL数据层以及数据接口

    数据层以及数据接口设计如下图(以g_orga组织机构和g_role角色)为例,这几个类可以通过.tt模版生成 设计参考学习http://www.cnblogs.com/hanyinglong/arch ...

  10. SqlServer2008 数据库同步的两种方式 (发布、订阅)

    尊重原著作:本文转载自http://www.cnblogs.com/tyb1222/archive/2011/05/31/2064944.html 上篇中说了通过SQL JOB的方式对数据库的同步,这 ...