html5中Canvas为什么要用getContext('2d')
HTML DOM getContext() 方法
HTML DOM Canvas 对象
定义和用法
getContext() 方法返回一个用于在画布上绘图的环境。
语法
Canvas.getContext(contextID)
参数
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
提示:在未来,如果 <canvas> 标签扩展到支持 3D 绘图,getContext() 方法可能允许传递一个 "3d" 字符串参数。
返回值
一个 CanvasRenderingContext2D 对象,使用它可以绘制到 Canvas 元素中。
描述
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型(2 维、3 维)提供不同的环境。当前,唯一支持的是 "2d",它返回一个 CanvasRenderingContext2D 对象,该对象实现了一个画布所使用的大多数方法。
举个简单的例子,画一个五子棋棋盘为例:
<canvas id="chess" width="450px" height="450px"></canvas>
var chess = document.getElementById("chess");
var context = chess.getContext("2d"); context.strokeStyle = "#0A0A0A"; var logo = new Image();
logo.src = "image/chess.jpg"; //图片加载完毕后的回调方法
logo.onload = function(){
//画键盘
context.drawImage(logo, 0, 0, 450, 450);
drawChessBorad(); } var drawChessBorad = function(){
for(var i = 0; i < 15; i++){
context.moveTo(15 + i*30, 15);
context.lineTo(15 + i*30, 435);
context.moveTo(15, 15 + i*30);
context.lineTo(435, 15 + i*30);
context.stroke();
}
}
html5中Canvas为什么要用getContext('2d')的更多相关文章
- H5_0009:关于HTML5中Canvas的宽、高设置问题
关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一: <canvas widt ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- HTML5中canvas介绍
1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...
- HTML5中canvas的save和restore方法
canvas的save和restore方法: save() 方法把当前绘画状态的一份拷贝压入到一个保存图像状态的栈中.这里的绘画状态指坐标原点.变形时的变化矩阵(该矩阵是调用 rotate().sca ...
- 【html5】HTML5中canvas怎样画虚线
在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢? 现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想 ...
- 浅谈HTML5中canvas中的beginPath()和closePath()的重要性
beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要 先来看一小段代码: var ctx=document.getElementById("can ...
- html5中canvas(2)
1.绘制图片(drawImage)(重点) 1.1 基本绘制图片的方式 context.drawImage(img, x, y); 参数: img 可以为:图片.视频或者canvas画布 x,y 绘制 ...
- HTML5中canvas与SVG有什么区别
SVG SVG 是一种使用 XML 描述 2D 图形的语言,它基于XML也就是我们可以为某个元素附加JavaScript事件处理器,如果SVG 对象的属性发生变化,那么浏览器能够自动重现图形. Can ...
随机推荐
- UESTC 881 神秘绑架案 --二维DP
LRJ黑书上的例题. 化简均方差公式: 均值的平方一定,所以只需让矩形的总分的平方和最小即可. 定义:dp[k][x1][y1][x2][y2],以(x1,y1)为左上角坐标,(x2,y2)为右下角坐 ...
- POJ 1195 Mobile Phones
树状数组,开始的时候wa了,后来看看,原来是概率论没学好,以为求(L,B) - (R,T) 矩阵内的和只要用sum(R+1,T+1) - sum(L,B) 就行了,.傻x了.. 必须 sum(R,T) ...
- 新手须知 C、C++和VC++之间的区别
本文目地 本文介绍的是C.C++.VC++ 三者之间的区别,也许作为初学者来说,会很容易混淆.希望通过本文的介绍,能够给你带来帮助. C语言 C语言是一种古老而又经久不衰的计算机程序设计语言,大约诞生 ...
- java 21 - 12 IO流的打印流
打印流 字节流打印流 PrintStream 字符打印流 PrintWriter打印流的特点: A:只有写数据的,没有读取数据.只能操作目的地,不能操作数据源.(只能写入数据到文件中,而不能从文件中提 ...
- static,静态关键字的详解
一,使用static声明属性 class Person{ // 定义Person类 String name ; // 定义name属性,暂时不封装 int age ; // 定义age属性,暂时不封装 ...
- 单机最大tcp连接数
from:http://www.cnblogs.com/mydomain/archive/2013/05/27/3100835.html 单机最大tcp连接数 网络编程 在tcp应用中,server事 ...
- Windows Phone 简介
中文官网 https://dev.windowsphone.com/zh-cn Windows Phone SDK 7.1 http://www.microsoft.com/zh-cn/downloa ...
- usb驱动开发1之学习准备
此系列是http://blog.csdn.net/fudan_abc/博文的整理,同时加入了自己的理解.很敬佩fudan_abc的文章,仔细学习和分析受益很多.注:fundan_abc所分析linux ...
- WEB 安全之 SQL注入<一> 盲注
SQL注入是一个比较"古老"的话题,虽然现在存在这种漏洞的站点比较少了,我们还是有必要了解一下它的危害,及其常用的手段,知己知彼方能百战不殆.进攻与防守相当于矛和盾的关系,我们如果 ...
- 前端开发工程师:网易web前端课程,价值1499元【无水印版】
这套网上的朋友购买分享给我的,特此分享~ 让大家都受益 早日成为强大的web前端开发工程师!!赶紧回复下载吧 下载地址:http://fu83.cn/thread-172-1-1.html