HTML5初识Canvas
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas示例</title>
<!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head> <body>
<p>Canvas的用途：</p>
<p>动态生成和展示图形、图表、图像以及动画</p>
<p>性能非常好：不需要将所绘制的图像中的每个图元当做对象存储。API相对简单</p>
<p>canvas默认会创建一块矩形区域 默认尺寸 300 X 150(px)</p>
<p>canvas的坐标默认是0,0 也叫原点</p>
<p>canvas也可以通过css的方式增加边框、内边距、外边距等</p>
<p>现在的大部分浏览器已经支持canvas<br />
老版本的IE不支持，可以使用一个js库来做兼容：explorercanvas.js <br>
js库地址：https://github.com/arv/ExplorerCanvas
</p> <canvas id="test" style="border:1px solid;" width="200" height="200">
当浏览器不支持canvas时会显示这段文字，这里还可以使用图片代替
</canvas>
<script>
function drawTest() {
//获取canvas元素及绘图上下文对象
var canvas = document.getElementById('test');
var context = canvas.getContext('2d'); //用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
window.addEventListener("load", drawTest, true);
</script>
</body> </html>
HTML5初识Canvas的更多相关文章
- [html5] 初识绘图canvas
这个星期被调到别的项目组专门做了一会儿前端,没办法,人太少,我也只能硬着头皮上... 说起来,html5的canvas真的好用,可以画色块,可以嵌入图片,可以通过定位在图片上写字等等 举例如下 在ht ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- 【书籍连载】《STM32 HAL 库开发实战指南—基于F7》-第一章
从今天起,每天开始连载一章<STM32 HAL 库开发实战指南—基于F7>.欢迎各位阅读.点评.学习. 第1章 如何使用本书 1.1 本书的参考资料 本书参考资料为:<STM32 ...
- javascript入门笔记9-认识DOM
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...
- 树梅派（Raspberry Pi 3b）安装kali linux 2.0
最近终于入手了一枚树梅派3B,忘记是什么时候到手了,买回来,也没有激动无比,也没有心情澎湃,也就扔到床头,并没有像以前超想拥有的感觉,像是失去了对这些东西都兴趣,没有以前那么强烈了,对于这些对信仰有些 ...
- glibc2.12升级至2.15
1.操作系统版本 [root@localhost ~]# cat /etc/redhat-release #CentOS release 6.9 (Final) 2.当前glibc版本 [root@l ...
- MySql编码、卸载、启动问题
一.启动问题 计算机------管理------服务------找到MySql------右键------启动或停止 问题:打开Mysql,点击 MySQL Command Line Client,输 ...
- 11.VUE学习之提交表单时拿到input里的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jupyter notebook中出现ValueError: signal only works in main thread 报错 即 长时间in[*] 解决办法
我在jupyter notebook中新建了一个基于py3.6的kernel用来进行tensorflow学习 但是在jupyter notebook中建立该kernel时,右上角总是显示 服务正在启动 ...
- Head First Java-图形化界面
Head First Java是本挺好的书,讲的比较清楚和简单.主要看原则.概念啥的.语法什么的,还是靠谷歌吧:) 这部分的笔记也有很多了,最近会努力更新和搬运.顺便自己也重新读一下. 就酱.想要这本 ...
- Choosing Capital for Treeland CodeForces - 219D （树形DP）
传送门 The country Treeland consists of n cities, some pairs of them are connected with unidirectional ...
- Permute Digits 915C
You are given two positive integer numbers a and b. Permute (change order) of the digits of a to con ...