Canvas标签初探

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

<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标签初探的更多相关文章

canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
html5 canvas标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
html5之canvas困惑在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
HTML5 canvas标签绘制正三角形鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
[html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
canvas标签的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HTML5的canvas标签制作黑客帝国里的简单画面
1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...
JS canvas标签动态绘制图型
使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

随机推荐

redis.conf配置详解
http://www.2cto.com/database/201307/225113.html
poj3030
#include <stdio.h> #include <stdlib.h> int main() { int n,r,e,a; scanf("%d",&a ...
Linux学习笔记1：配置Linux网络和克隆虚拟机并更改配置
一.配置Linux网络在安装Linux的时候,一定要保证你的物理网络的IP是手动设置的,要不然会在Linux设置IP连通网络的时候会报network is unreachable 并且怎么也找不到问 ...
自己主动下载源代码_并编译_打包_部署_重新启动服务的Shell脚本
这里面Shell的各个操作含义,可參考我三年前的这篇文章:http://blog.csdn.net/jadyer/article/details/7960802 #!/bin/sh APP_NAME= ...
取得正在运行的Activity
在main.xml中: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...
exit函数的妙用
写了一个程序,用来推断一个文件是否存在: #include<stdio.h> main() { FILE *fp; fp = fopen ("/home/wang/my/ct ...
mongodb 2.6.6 在window10下的安装
首先感谢波仔的知道,其次感叹下WIN10的牛叉,兼容性还不错. 首先,下载mongodb 2.6.6 安装包,可惜,官网太慢,还得注册.不过还好,我是个好人:http://pan.baidu.com/ ...
bootstrap注意事项（四）表格
1.基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是我们觉得,表格元素使 ...
SQL函数：字符串中提取数字，英文，中文，过滤重复字符（转）
--提取数字 IF OBJECT_ID('DBO.GET_NUMBER2') IS NOT NULL DROP FUNCTION DBO.GET_NUMBER2 GO )) ) AS BEGIN BE ...
R语言初涉
R语言简单的函数的使用: “<-”表示赋值,也可以用“=”. c()为连接函数,连接中间的数据表示向量,连接中间的数据表示向量,X1 <- c()表示用一组数据为变量X1赋值. mean( ...

Canvas标签初探

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

随机推荐

热门专题