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 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP 开发工具
2006/12/06 PHP
php 远程关机操作的代码
2008/12/05 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP SOCKET编程详解
2015/05/22 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
javascript parseInt 大改造
2009/09/27 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python延时操作实现方法示例
2018/08/14 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
大一自我鉴定范文
2013/12/27 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
单位委托书
2014/10/15 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
企业培训简报范文
2015/07/20 职场文书
户外拓展训练感想
2015/08/07 职场文书
环保主题班会教案
2015/08/13 职场文书
创业计划书之便利店
2019/09/05 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL