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> ...
随机推荐
- C/C++ 用libcurl库进行http通讯网络编程
C/C++ 用libcurl库进行http通讯网络编程 目录索引: 一.LibCurl基本编程框架 二.一些基本的函数 三.curl_easy_setopt函数部分选项介绍 四.curl_easy_p ...
- CentOs文件实时同步
1,生成数据序
- Hibernate 、多表关联映射 - 一对一关系映射(one- to-one)
hibernate.cfg.xml: <hibernate-configuration> <session-factory name="sessionFactory&quo ...
- fs.rename可以重新写入文件
fs.rename可以重新写入文件 用法 fs.rename(旧path,新path,callback)可以重新写入文件 引用地址 http://www.jb51.net/article/58548. ...
- Python实现Hadoop MapReduce程序
1.概述 Hadoop Streaming提供了一个便于进行MapReduce编程的工具包,使用它可以基于一些可执行命令.脚本语言或其他编程语言来实现Mapper和 Reducer,从而充分利用Had ...
- 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 ...
- CentOS6.3 下启动Oracle service和listener
一.启动Oracle数据库和监听器 首先切换到Oracle专有用户: [root@NJZYY06 ~]# su - oracle [oracle@NJZYY06 ~]$ 1.启动数据库: [oracl ...
- JAVA 类加载器 第14节
JAVA 类加载器 第14节 今天我们将类加载机制5个阶段中的第一个阶段,加载,又叫做装载.为了阅读好区分,以下都叫做装载. 装载的第一步就是要获得二进制的字节流,它可以从读.class文件获得,也可 ...
- can't find which disk is full
df -lh lsof | grep delete $program_id df -lh # 搞定问题
- QF——网络之网络请求的几种方式,图片缓存
同步请求和异步请求: 同步请求会阻塞主线程:不会开启新的线程,还是主线程,所以直到请求成功后,才能执行其它操作. 异步请求不会阻塞主线程.开启新的线程去请求服务器,而不影响用户的交互操作等其他动作. ...