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 border实现图片遮罩效果代码
Apr 09 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 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
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Python re模块介绍
2014/11/30 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python 高效编程技巧分享
2020/09/10 Python
人事助理岗位职责
2013/11/18 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
Nginx进程管理和重载原理详解
2021/04/22 Servers
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers