Canvas的基本用法
canvas没有设置宽度和高度的时候，会初始化宽度：300像素和高度：150像素。可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。
如果浏览器不支持<canvas>，那么在<canvas>标签输入替换提示内容。支持<canvas>的浏览器将会忽略替换提示内容，正常渲染canvas。
<canvas id="stockGraph" width="150" height="150">
您的浏览器不支持canvas 功能 <!--在不支持该功能的浏览器时出现-->
<img src="data:images/clock.png" width="150" height="150" alt=""/> <!--在支持该功能的浏览器时出现-->
</canvas>
</canvas>结束标签不能省！！如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
渲染上下文
//通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象
var canvas = document.getElementById('tutorial');
// 使用getContext() 方法来访问绘画上下文。
var ctx = canvas.getContext('2d');
检查兼容性
替换内容是用于在不支持 <canvas> 标签的浏览器中展示的。通过测试getContext()方法的存在，脚本可以检查编程支持性。
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
简单模板
<body>
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
window.onload=function(){
draw();
}
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
当页面加载结束的时候就会执行draw()这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用window.setTimeout()， window.setInterval()，或者其他任何事件处理程序来调用。
简单的例子：
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
效果如下：
Canvas的基本用法的更多相关文章
- canvas的常见用法
Canvas canvas是一种抽象概念,是2D图形系统中的重要部分,canvas一系列函数最终都是android 2D图形库Skia的一些列封装,对应在SKCanvas.cpp.canvas在系统中 ...
- android Canvas 和 Paint用法
自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...
- Javascript高级编程学习笔记（84）—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
- Android为TV端助力 Canvas 和 Paint用法
自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...
- [译]Canvas的基本用法
在本文章中 <canvas> 元素 替换内容 </canvas> 标签不可省 渲染上下文(The rendering context如何翻译) 检查支持性 一个模板骨架 一个简 ...
- Paint与Canvas的简单用法
参考:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=278237 自定义View 重写onDraw方法 package com. ...
- canvas入门级基本用法实现雨滴下落特效
canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- html5 canvas基本用法
通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <m ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
随机推荐
- iOS多线程篇：NSThread简单介绍和使用
一.什么是NSThread NSThread是基于线程使用,轻量级的多线程编程方法(相对GCD和NSOperation),一个NSThread对象代表一个线程, 需要手动管理线程的生命周期,处理线程同 ...
- Linux 系统应用编程——标准I/O
标准I/O的由来 标准I/O指的是ANSI C 中定义的用于I/O操作的一系列函数. 只要操作系统安装了C库,标准I/O函数就可以调用.换句话说,如果程序中使用的是标准I/O函数,那么 ...
- rails将类常量重构到数据库对应的表中之三
经过博文之一和之二的重构,貌似代码表现的还不错,正常运行和test都通过鸟,但是,感觉告诉我们还是有什么地方不对劲啊!究竟是哪里不对劲呢?我们再来好好看一下. 我们把数据库表中的支付方式集合直接放在实 ...
- mac os X中关于dayone缓存的实际文件位置
最近刚安装了mac版的dayone软件,感觉蛮不错的!以前一直用iphone版的,mac版是要米的,68米丫!想了想还是一咬牙:买了! 我用的是iCloud同步,虽然资料放在云中,但本地还是会有缓存的 ...
- 熊猫猪新系统测试之二:Mac OS X 10.10 优胜美地
在第一篇windows 10技术预览版测试之后,本猫为大家呈现另一个刚刚才更新的mac操作系统:"优胜美地".苹果同样一改以猫科动物为代号命名的传统,在10.9的Mavericks ...
- python select.select模块通信全过程详解
要理解select.select模块其实主要就是要理解它的参数, 以及其三个返回值.select()方法接收并监控3个通信列表, 第一个是所有的输入的data,就是指外部发过来的数据,第2个是监控和接 ...
- Python 3 中的json模块使用
1. 概述 JSON (JavaScript Object Notation)是一种使用广泛的轻量数据格式. Python标准库中的json模块提供了JSON数据的处理功能. Python中一种非常常 ...
- 聊聊Unity的Gamma校正以及线性工作流
0x00 前言的前言 这篇小文其实是在清明节前后起的头,不过后来一度搁笔.一直到这周末才又想起来起的这个头还没有写完,所以还是直接用一个月前的开头,再将过程和结尾补齐. 0x01 前言 结束了在南方一 ...
- Python入门指南（超详细）
Python 是一门非常容易上手的语言,通过查阅资料和教程,也许一晚上就能写出一个简单的爬虫.但 Python 也是一门很难精通的语言,因为简洁的语法背后隐藏了许多黑科技.本文主要针对的读者是: 毫无 ...
- centos/linux 禁止root用户远程登录
注意:在禁止root等前要建立一个用户用来远程登录,否则退出后无法通过远程登录服务器. 编辑 /etc/ssh/sshd_config 文件 更改参数 PermitRootLogin yes 为 Pe ...