canvas 基础
1.<canvas>元素
<canvas id="tutorial" width="150" height="150"></canvas>
替换内容
<canvas>元素不同于在其中的<img>标签，就像<video>，<audio>，或者 <picture>元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas> <canvas id="clock" width="150" height="150">
<img src="data:images/clock.png" width="150" height="150" alt=""/>
</canvas>
</canvas> 标签不可省
2.渲染上下文（The rendering context）
WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl")
我们将会将注意力放在2D渲染上下文中
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
3.检查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
4.一个模板骨架
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
5.一个简单例子
<html>
<head>
<script type="application/javascript">
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);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
canvas 基础的更多相关文章
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
- canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- canvas 基础知识
canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
- canvas基础语法
前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...
- canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- canvas基础动画示例
canvas基础动画示例 本文主要用最简单的例子,展示canvas动画效果是如何实现的 动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...
- canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...
随机推荐
- 第27章 LTDC/DMA2D—液晶显示—零死角玩转STM32-F429系列
第27章 LTDC/DMA2D—液晶显示 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.co ...
- Login用户登录（Python实现）
username_fault = "isuperSun" #程序存储用户名和密码 password_fault = " counts = 0 while counts&l ...
- iOS面试题总结（持续更新）
过段时间打算跳槽,找了一些面试题来做,在这里做个总结方便review,希望能对要面试的童鞋有帮助. 以下为面试题: 运行以下代码会有什么结果 NSString *str1 = @"str1& ...
- jquery 操作css 选择器
.addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...
- mpvue项目中安装weui
观察一下发现,mpvue项目打包css的规律是:根组件App.vue里的style样式全部打包到 dist / static / css / app.wxss .. 参照微信小程序的原生引入使 ...
- UVa中国麻将（Chinese Mahjong,Uva 11210）
简单的回溯题 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm ...
- PHP 微信公众号之客服完整讲解
//获取access_token private static function get_access_token($app_id) { $getAuthorizerInfo = wx_auth::g ...
- lan口和wan口的配置
路由器的一排网线接口,分为 lan 和 wan .但不是谁生来就是lan口 或者 wan口 . 也没有谁规定就一个wan口 就只有一个. 网口就是网口, 决定它是 lan口 还是 wan口 ,是由我们 ...
- P1198 [JSOI2008]最大数【树状数组】
题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制: L 不超过当前数列的长度. (L &g ...
- protobuf-2.5.0的下载与安装
1.下载 Hadoop使用protocol buffer进行通信,需要下载和安装protobuf-2.5.0.tar.gz.由于现在protobuf-2.5.0.tar.gz已经无法在官网https: ...