html5中canvas学习笔记1-画板的尺寸与实际显示尺寸


Posted in HTML / CSS onJanuary 06, 2013

在canvas中当在canvas上写width和height时为canvas的实际画板大小,默认情况下width为300px,height为150px。
在style里面写css样式的时候widht和height为实际显示尺寸大小。
现在以用canvas画一个对角线为例

复制代码
代码如下:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>canvas</title>
<script type='text/javascript'>
window.onload = function(){
getCanvas();
};
//canvase绘图
function getCanvas(){
//获得canvas元素及其绘图上下文
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
//用绝对路标来创建一条路径
context.beginPath();
context.moveTo(0,200);
context.lineTo(200,0);
//将这条先绘制到canvas上
context.stroke();
}
</script>
</head>
<body>
<canvas id='canvasId' width="200px" height='200px' style='width:400px;height:200px;' ></canvas>
</body>
</html>

显示效果如下:
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸 
可以看到,canvas画板为200*200的正方形,画图是用到了(0,200)到(200,0)的对角线显示。
但是图形显示的时候为400*200的长方形,而且显示的也是对角线。
HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 #HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 #HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 #HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 #HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 #HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 #HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 #HTML / CSS
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
用python批量下载apk
2020/12/29 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
护士工作心得体会
2016/01/25 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
一文解答什么是MySQL的回表
2022/08/05 MySQL