canvas元素的实际尺寸（宽度，高度）是由标签上的属性width和height来决定的。

这两个属性不设置时默认值为：宽度=300px，高度=150px。

如果在样式表里设置width和height，则表示在实际宽度和高度的基础上进行缩放，缩放后的尺寸为样式里设置的width和height。

示例代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>canvas</title>

    <style type="text/css">

        #diagonal {

            border:1px solid #000; width:200px; height:400px;

        }

    </style>

</head>

<body>

    <canvas id="diagonal" width="200" height="200"></canvas>

    <script type="text/javascript">

        function drawDiagonal() {

            var canvas = document.getElementById("diagonal");

            var context = canvas.getContext("2d");

            context.beginPath();

            context.moveTo(100,50);

            context.lineTo(0, 150);

            context.moveTo(0, 50);

            context.lineTo(100, 150);

            context.stroke();

        }

        window.addEventListener("load", drawDiagonal, true);

    </script>

</body>

</html>

上述代码根据属性中设置的值<width="200" height="200">生成一个200*200的元素，

然后根据样式中设置的值<width:200px; height:400px;>缩放为200*400的元素

这也是只用样式设置canvas尺寸时绘制出来的图形感觉变形的原因

Html5学习--canvas的更多相关文章

  1. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  2. HTML5学习(四)---Canvas绘图

    参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...

  3. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  4. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  5. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  6. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  7. [HTML5] 飞龙天惊-HTML5学习系列

    飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...

  8. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  9. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

随机推荐

  1. 为什么 UDP 有时比 TCP 更有优势

    随着网络技术飞速发展,网速已不再是传输的瓶颈,UDP协议以其简单.传输快的优势,在越来越多场景下取代了TCP,如网页浏览.流媒体.实时游戏.物联网. 1.网速的提升给UDP稳定性提供可靠网络保障 CD ...

  2. iOS UITextField 输入字数限制的实现

    首先你的ViewController需要实现 UITextFieldDelegate 代理, 其次,需要字数限制的UITextField实例的代理要设置成 self(ViewController) 然 ...

  3. Unity EditorWindow 笔记

    一:功能 1.实例化 //设置插件在菜单栏的位置 和快捷键 [MenuItem("YCC's Tools/模型更改/更改父物体和测量长度 %W")] //实例化窗体 static ...

  4. TortoiseSVN客户端重新设置用户名和密码[转]

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  5. IOS开发之——使用Segue在StoryBoard之间切换

    使用Segue能够在ViewController之间来回切换,以下就来说下切换方法: 1. 使用点击button进行切换 直接上图,在须要切换的View属性界面,点击Modal然后拉到前一个view界 ...

  6. VC++文件相关操作的函数封装实现

    在开发编译工具中,需要用到文件的相关操作,于是就封装了相关的函数实现: //判断文件是否存在 BOOL FileIsExist(CString strFileName) { CFileFind fin ...

  7. Java基础知识强化之集合框架笔记57：Map集合之HashMap集合（HashMap<Student，String>）的案例

    1. HashMap集合(HashMap<Student,String>)的案例 HashMap<Student,String>键:Student      要求:如果两个对象 ...

  8. jwplayer 源代码重新编译

    由于原来下载的jwplaery播放器中带有官方的播放统计信息,需要从官方加载统计js脚本,影响播放器加载速度,因此从官方github站点上下载播放器进行重新编译操作,现记录过程如下. 下载最新的jwp ...

  9. Bootstrap--全局CSS样式之排版

    Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式. (1)标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还 ...

  10. 苹果手机 iframe 无法滚动bug

    原来在html5下,iframe 只有 src 属性scroling='no' 解决办法:在iframe外加一层第div,设置样式-webkit-overflow-scrolling:touch;ov ...