[html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形。Canvas是逐像素渲染的。在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何已被图形覆盖的对象。
1、Canvas标签
html5中<canvas>元素用于图形的绘制,通过脚本(通常是JavaScript)来完成
<canvas>标签只是图形容器
可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图像
1.1 直接在html5中创建,这种方式采用得比较少
<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .canvas{ background-color: aqua; } </style> </head> <body> <canvas class="canvas" id="canvas1" width="200px" height="200px"></canvas> </body> </html>
1.2 通过脚本创建
html文件:
<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="app.js"></script> <body> </body> </html>
其中使用到的app.js:
var CANVAS_WIDTH = 200, CANVAS_HEIGHT=200; window.onload = function(){ createCanvas(); } function createCanvas(){ document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\" height = \""+CANVAS_HEIGHT+"\"></canvas>" }
2、绘制图形
API的地址:https://developer.mozilla.org/zh-CN/ 进入后选择WEB平台的Web API & DOM
<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="app.js"></script> <body> </body> </html>
其中的app.js:
var CANVAS_WIDTH = 500, CANVAS_HEIGHT=500; var mycanvas,context; window.onload = function(){ createCanvas(); drawRect(); } function createCanvas(){ document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\" height = \""+CANVAS_HEIGHT+"\"></canvas>" mycanvas = document.getElementById("mycanvas"); context = mycanvas.getContext("2d"); } function drawRect(){ context.fillStyle="#ff0000"; context.translate(200,200); context.rotate(45); context.scale(2,0.5); context.fillRect(0,0,200,200); }
3、绘制图片
将app.js中drawRect()的内容替换成以下即可:
var img = new Image(); img.onload = function(){ context.drawImage(img,0,0); } img.src="1.jpg";
[html5] 学习笔记-Canvas标签的使用的更多相关文章
- [html5] 学习笔记-Canvas应用
通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5 学习笔记(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
随机推荐
- PHP 领域逻辑与数据库映射
http://blog.csdn.net/hguisu/article/details/7569968
- Zbus 笔记
http://blog.csdn.net/cx308679291/article/details/50113257 Zbus学习笔记 标签: zbus 2015-11-30 15:55 266人阅读 ...
- log4CXX第二篇---配置文件(properties文件)详解
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
- java类集: collection, list , set, map
都在java.util包里.容器:装各种对象. Collections类 : 集合工具类, 提供了一些静态方法, 方法里的参数是List等. Colection接口,子接口主要有: Set: 内容 ...
- Android高斯模糊技术,实现毛玻璃效果(转)
本博客转自郭霖公众号:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650235930&idx=1&sn=e328 ...
- jqGrid添加自定义按钮
用法: <script> ... jQuery("#grid_id").navGrid("#pager",...).navButtonAdd(&qu ...
- mysql优化------2 查看系统性能(表大小,I/o性能)
三:判断mysql I/0 性能的一种方式(网络搜集供参考) show global status like 'innodb_dblwr%'\G 如果innodb_dblwr_pages_writ ...
- photoshop如何快速切图
作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切. 后来知道用切片工具,但也仅限于互不重叠的图片. 在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧. 其实, ...
- USB自定义HID设备实现-LPC1768
首先在之前鼠标的基础上修改设备描述符 #include "usbdesc.h" //usb标准设备描述符 const U8 USB_DeviceDescriptor[] = { U ...
- IOS开发-OC学习-MD5加密
MD5的全称是Message-Digest Algorithm 5. MD5加密算法为现在应用最广泛的哈希算法之一,该算法广泛应用于互联网网站的用户文件加密,能够将用户密码加密为128位的长整数.数据 ...