canvas基本使用
1.什么是CANVAS
canvas是html5新增的画布元素,可以通过javascript来在画布上绘制图形,图标以及任何视觉性的图像。
2.canvas的用途
替代flash,做各种动态效果,做小游戏。
3.canvas的使用
使用canvas需要先在html页面中,存放一个canvas的元素。如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- canvas存在游览器兼容性问题,ie9及以下是不支持canvas元素的,如果在不支持的游览器上用到了canvas,它就会显示canvas中的这段文字 -->
<canvas id="canvas" width="500" height="500">
当前的游览器版本过低,请更新游览器到最新版本
</canvas>
</body>
</html>
注意:在body中添加canvas元素的时候要先设置出canvas的属性width,height的数值,且width,height必须是元素的属性,不能是样式(style="widht:500px;height:500px",这样设置会出现问题)。
var canvas = document.getElementById('canvas'); // 获取到元素对象
var ctx = canvas.getContext('2d'); // 根据元素对象获取到渲染上下文和它的绘画功能(2d)
4.canvas的坐标系
canvas的默认坐标系就是以canvas左上角为0,0点,向右是x正坐标,向左是x负坐标,向下是y正坐标,向上是y负坐标
4.canvas的简单案例
绘制矩形
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(0,0,200,200); // 绘制一个起点是0,0,长宽都是200的矩形
ctx.stroke(); // 绘制线条,边框
</script>
</body>
</html>
页面效果:
canvas基本使用的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- Node.js搭建本地web服务(转)
http://www.cnblogs.com/wangfupeng1988/p/4143996.html https://github.com/finderL/webserver
- UNIX网络编程卷1 时间获取程序client UDP 协议无关
本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie /** * UDP.协议无关,调用 getaddrinfo 和 udp_client **/ ...
- struts2 在拦截器进行注入(依据Action是否实现自己定义接口)
比如:经常在Action中都须要获取当前登录的User,就须要获取Session.然后从Session获取当前登录的User,由于这些步骤都是反复操作,能够想办法在拦截器中进行实现.能够自己定义一个接 ...
- [android] 本地推送服务
遇到新需求:游戏要添加本地的推送功能,ios比较好搞,在应用退出时的系统回调中设置,android就稍稍麻烦一点,需要用到 android中的service,和receiver
- Jquery学习笔记(3)--注册验证
嗯哼,验证用户名,密码,重复密码,手机号,邮箱.提交时全部进行验证,通过才跳转. <!DOCTYPE html> <html lang="en"> < ...
- 写一个php小脚本辅助渗透测试
因为一个注入要爬行一些数据,然后写的一个小脚本,能写脚本来辅助渗透,也算是里程碑.哈哈哈 <?php $num = 1; while ($num <= 39) { $web_url = & ...
- Intellij IDEA常用快捷键整理
ps:使用Intellij IDEA编辑器有蛮长一段时间了.哈哈.整合一下常用的快捷.避免自己以后还要再找. 顺序大概就是从上到下的 Alt + ENTER : 自动修正,提示Alt + Insert ...
- libubox-blob/blobmsg
大部分内容来自libubox [3] - BLOB BLOGMSG,推荐阅读原文. blob提供二进制数据处理能力.有几种支持的数据类型,并可以创建块数据在socket上发送.整型数字会在libubo ...
- 【犀牛书笔记】JavaScript正则表达式的模式匹配
正则表达式,是一个描述字符模式的对象. JavaScript用RegExp类表示正则表达式 String和RegExp都定义了相关方法 原创文章,转载请注明:http://www.cnblogs.co ...
- 【Java】对文件或文件夹进行重命名
在Java中,对文件或文件夹进行重命名是很简单的,因为Java的File类已经封装好renameTo的方法. 修改文件或者文件夹的名字都使用这个方法.例如如下的程序: import java.io.* ...