canvas 用法详解 1
来源:互联网 发布:path软件 5.1 编辑:程序博客网 时间:2024/06/07 08:35
canvas是HTML 5中用做画图的标签,他的英文翻译是“画布,油画”。顾名思义,实际上它只是提供一张画布,供web开发人员作画,我们不可能用画布在画布上面作画吧?
咦,出问题了,出现了这种情况
而不能这样定义:
我们的笔在哪呢? 笔,就是canvas的里面的一个对象 CanvasRenderingContext2D 对象;这个对象提供了一系列的API 供我们作画。那我们如何获得它呢?
var c=docement.getElementById("mycanvas"); //获取canvas 标签的元素var cans=c.getContext("2d");//获取CanvasRenderingContext2D对象,目前大部分浏览器只支持2D图像,3D的正在探索中。好了,有了画布和笔,可以开始作画了!哇哈哈,成画家了!
cans.beginPath();//开始一条新路径cans.moveTo(100,100);//将笔移到 (100,100)的坐标点cans.lineTo(200,200);//画到 坐标 (200,200)cans.lineTo(200,100);//再画到 坐标 (200,200)
c.stroke();//画线
咦,出问题了,出现了这种情况
这是为什么?原来canvas是有默认大小的:width: 300px; height:150px
好吧,我在css 中添加
#mycanvas{
width:600px;
height:600px
}
这下可以了吧? 出现:
居然按比例放大,原来canvas只是一张画布,真正作画的是内部的CanvasRenderingContext2D 对象,确定canvas样式表的大小,只能确定外部形式上的大小,并不能确定画内部的实际大小;确定 canvas的实际大小需要定义 它的 属性“width”和属性”height“。
这里要注意,width和height是标签canvas的属性,而不是style、css中的属性,就是说必须这样定义
<canvas ID='MM' width="200px" height="300px"></canvas>
而不能这样定义:
<canvas ID='MM' style="width:300px;height:300px"></canvas>
cans.getAttribute("width");
cans.width;
设置:
cans.setAttribute("width","400");
cans.width=400;
设置成功后:
注意:设置宽高一定要在画图之前,就是说如果是JS设置尺寸,一定要将设置的语句放在画图的语句前面。否则,设置尺寸会重绘画布,变成一片空白。
好吧,今天学到这儿。下次有时间在接着写。
哇哈哈,一天学一点,天天有进步!
- canvas 用法详解 1
- canvas arcTo()用法详解
- canvas 用法详解
- canvas arcTo()用法详解
- Android canvas的用法详解
- Android自定义View-canvas.drawRect()用法详解
- Canvas用法
- Canvas 详解
- Canvas详解
- Canvas详解
- 【canvas】Android Canvas绘图详解
- Canvas---HTML5 Canvas API详解
- HTML5新元素之Canvas详解(1)
- Android canvas用法介绍
- Android canvas用法介绍
- canvas用法示例
- Android canvas用法
- canvas transform用法!
- Firefox/W3C唯一的方法
- Ubuntu使用笔记_设置超级用户
- 写给Git初学者的7个建议
- 面试问题的选择
- c语言学习成果
- canvas 用法详解 1
- linux kill all proccess
- 关于CSS在IE6以下浏览器不支持:hover伪类的解决方式
- 【设置】保存表时,受到阻止
- 最大公约数--char4
- [WinForm]dataGridView背景色交替
- 为什么需要使用2级指针(转载)
- Understanding ANTLR Grammar Files
- 自定义WM_NOTIFY消息