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

2016-02-19 12:14 25 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的长方形,而且显示的也是对角线。

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

延伸阅读
标签: Web开发
这篇将要介绍一下 Canvas 中的基本图形。 图形的基础 - 路径 在 Canvas 中,所有基本图形都是以路径为基础的,也就是说,我们在调用 2dContext 的 lineTo、rect 等方法时,其实就是往已经的 context 路径集合中再添加一些路径点,在最后使用 fill 或 stroke&nbs...
标签: Web开发
 一、基本概念 什么是Canvas canvas 是一个新的 HTML 元素,这个元素在 HTML5  中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不...
标签: 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...
标签: Web开发
本文分为两个部分,第一部分讨论跨平台网站的可行性,第二部分讨论viewport是如何设置的 开发跨平台网站? 靠标签的自适应宽高实现多尺寸通用!? 标签宽高可以自适应没错,我们很早就可以这么做了。但是你会发现很多pc端的传统网站还是会把宽度固定。(淘宝采用1000px宽度,搜狐950px...)为什么我们不让网站自适应宽高呢?那是因为,...
标签: Web开发
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 3.Web...

经验教程

198

收藏

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