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

2016-02-19 12:14 28 1 收藏

下面这个html5中canvas学习笔记1-画板的尺寸与实际显示尺寸教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

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

代码如下:

!DOCTYPE html
head
meta charset=utf-8 /
titlecanvas/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

显示效果如下:
 
可以看到,canvas画板为200*200的正方形,画图是用到了(0,200)到(200,0)的对角线显示。
但是图形显示的时候为400*200的长方形,而且显示的也是对角线。

来源:http://www.tulaoshi.com/n/20160219/1600309.html

延伸阅读
标签: Web开发
 一、基本概念 什么是Canvas canvas 是一个新的 HTML 元素,这个元素在 HTML5  中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不...
标签: Web开发
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种,一种方式是通过API来完成: 代码如下: // mouse event ca...
标签: Web开发
本文分为两个部分,第一部分讨论跨平台网站的可行性,第二部分讨论viewport是如何设置的 开发跨平台网站? 靠标签的自适应宽高实现多尺寸通用!? 标签宽高可以自适应没错,我们很早就可以这么做了。但是你会发现很多pc端的传统网站还是会把宽度固定。(淘宝采用1000px宽度,搜狐950px...)为什么我们不让网站自适应宽高呢?那是因为,...
标签: Web开发
复制代码代码如下: !DOCTYPE HTML html head meta charset="UTF-8" titleHTML5示例/title style type="text/css" #container{border:1px solid #ccc;width:800px;height:600px;position:relative;} canvas{position:absolute;top:0px;left:0px;z-index:1;} /style /head body select id="tools" option value="pen"铅笔/option op...
标签: ASP
  bask 把它编译成组件就可以用了,还支持png 'I have released this source code into the public domain.  You may use it 'with no strings attached. 'Just call GetImageSize with a string containing the filename, and 'it will return a user defined type 'ImageSize'  (see below) 'Return values of ...

经验教程

340

收藏

61
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部