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. openstack kvm 虚拟机磁盘差异衍生

    1, openstack虚拟实例备份之--多镜像格式多镜像文件合并为一个镜像文件衍生-差异镜像文件    /var/lib/nova/instances/b0abc22f-1a73-4079-b1bc ...

  2. yii快速入门与参考

    Yii 权威指南 http://www.yiichina.com/guide/ http://www.yiiframework.com/doc/guide/1.1/zh_cn/ Ⅰ.基本概念一.入口文 ...

  3. c 语言结构体struct的三种定义方式 及 typedef

    struct 结构体名{ 成员列表: ..... }结构体变量: 结构体类型变量的定义 结构体类型变量的定义与其它类型的变量的定义是一样的,但由于结构体类型需要针对问题事先自行定义,所以结构体类型变量 ...

  4. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  5. linux 创建连接命令 ln -s 软连接

    这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s, 具体用法是:ln -s 源文件 目标文件. 当 我们需要在不同 ...

  6. spring security3.2配置---权限管理

    之前已经在我的博客中发过security的执行流程图了,大家能够先去看看那个图再看这篇.今天我主要在这里贴出了security配置中的几个重要的类和两个xml配置文件,基本上控制权限的就是这几个文件了 ...

  7. Hack工具

    黑客工具一般是由黑客或者恶意程序安装到您计算机中,用来盗窃信息.引起系统故障和完全控制电脑的恶意软件程序.同时也指黑客进行黑客任务时使用的工具.著名的有nmap,流光等等. 目录 1 种类 2 恶意程 ...

  8. hadoop错误ERROR namenode.NameNode (NameNode.javamain(1657)) - Failed to start namenode java.net.BindException：Port in use：host1：50070

    解决方法: 1.通过lsof -i:50070(lsof可以通过yum install lsof安装)查看,发现是mysql被占用了 2.修改mysql端口 从/usr/share/mysql/my- ...

  9. Android BLE开发——Android手机与BLE终端通信初识

    蓝牙BLE官方Demo下载地址:   http://download.csdn.net/detail/lqw770737185/8116019参考博客地址:    http://www.eoeandr ...

  10. Java基础知识强化之集合框架笔记64：Map集合之ArrayList嵌套HashMap

    1. ArrayList集合嵌套HashMap集合并遍历.  需求:         假设ArrayList集合的元素是HashMap.有3个.         每一个HashMap集合的键和值都是字 ...