HTML5中插入一个Canvas元素,如下:

<canvas id="mycanvas"></canvas>

要想在该画板上进行操作,则需要先取得其执行上下文context,

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

取得目标画板 canvas 的执行上下文 context 之后,通过画图 API 进行画图操作。假设这里想要在canvas 上画出三个由不同颜色填充的矩形,实现如下:

 context.fillRect(5, 5, 145, 145);
context.fillStyle = "rgb(0, 162, 232)"; //指定填充色
context.fillRect(40, 55, 145, 145);
context.fillStyle = "rgba(255, 0, 0, 0.2)";
context.fillRect(75, 105, 145, 145);

该段代码的目标实现效果为:

但,理想是丰满的,现实却很骨感。实现显示效果为:

为什么会这样呢?肯定是由哪里不对!事实上问题也不难,就是 Canvas 元素的默认宽度为 300px ,默认高度为 150px 。在上面的图形中,其高度超出了其默认高度值,而又没有给canvas 设置新的高度,所以超出的部分就没有显示出来。为了正常显示目标效果图像,则需要重新设置其宽度和高度值。在这里可以通过三种方法去设置Canvas 的width, height 属性值。

  1. 直接在 <canvas> 元素中设置,如下:

    <canvas width="300" height="300"></canvas>

    注意,这里不是使用 style="width:300px; height:300px“ 去设置。

  2. 使用 canvas 的属性值设置,如下:
     canvas.width = 300;
    canvas.height = 300;

    注意,这里设置值时不需要带单位。

  3. 使用 setAttribute() 方法设置,如下:
     canvas.setAttribute("width", 300);
    canvas.setAttribute("height", 300);

  另外,可以通过两个常量值去设置其宽度和高度,使其等于屏幕的宽度和高度,分别为 screen.availWidth 和 screen.avail.Height 。

  学习资料:Developers-Guide-to-HTML5-Canvas

Canvas 宽度、高度设置的更多相关文章

  1. fancybox 点击 js脚本判断验证,fancybox的宽度高度设置

    当我们在使用fancybox做弹出窗口的时候,可能在弹窗之前就需要判断一些验证条件,例如我这里有个案例,用户必须先得勾选一个 那么怎么做呢?我们用到fancybox的一个onStart方法就可以了 $ ...

  2. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

    1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...

  4. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  5. 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  6. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

  7. js 获取浏览器/网页宽度高度整理

    网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...

  8. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  9. RecyclerView常见问题解决方案,RecyclerView嵌套自动滚动,RecyclerView 高度设置wrap_content 无作用等问题

    1,ScrollView或者RecyclerView1 嵌套RecyclerView2  进入页面自动跳转到recyclerView2上面页面会自动滚动貌似是RecyclerView 自动获得了焦点两 ...

随机推荐

  1. nyoj_68:三点顺序(计算几何)

    题目链接 根据 AB*AC的值进行判断即可(ps,结果为0时不构成三角形) #include<iostream> #include<cstdio> #include<cs ...

  2. GIT - 代码管理工具之命令集

    GIT 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问.它会把你的每次提交的文件的全部内容都会记录下来. GIT特点 速度 简单的设计 对非线性开发 ...

  3. (转)硬盘分区备忘(主分区,扩展分区和逻辑分区)以及Linux硬盘分区工具parted 介绍

    场景:最近在学习Linux的基础知识,不可避免的设计到Linux的磁盘分区,以前做过总结,但是那种总结就是复制别人的文章,总结完就不想看第二遍,所以很容易就遗忘了!清楚明白的理解分区后,我就可以在自己 ...

  4. 有关java 8

    http://www.iteye.com/news/27608     Java 8 发布时间敲定,延期半年 http://www.iteye.com/news/24631/   Java 8 的重要 ...

  5. OVS故障处理一例

    OVS下无法访问内部网站 遇到朋友求助的一个客户问题,环境是这样的,客户在自己的iaas平台(不是openstack)上使用ovs,物理交换机上配置vlan和dhcp service,计算节点的ovs ...

  6. openstack中使用linux_bridge实现vxlan网络

    openstack环境: 1 版本:ocata 2 系统:ubuntu16.04.2 3 控制节点 1个 + 计算节点 1个 4 控制节点网卡为ens33,ip = 172.171.5.200 ens ...

  7. Android保存图片到本地相册

    好久没有写东西了.备份下知识吧.免得忘记了 . 首先贴一段代码 --  这个是先生成一个本地的路径,将图片保存到这个文件中,然后扫描下sd卡.让系统相册重新加载下 .缺点就是只能保存到DCIM的文 件 ...

  8. 一步一步深入理解Dijkstra算法

    先简单介绍一下最短路径: 最短路径是啥?就是一个带边值的图中从某一个顶点到另外一个顶点的最短路径. 官方定义:对于内网图而言,最短路径是指两顶点之间经过的边上权值之和最小的路径. 并且我们称路径上的第 ...

  9. mysql控制台出现“unknown column 'password' in 'field list'问题

    今天在windows系统上使用MySQL命令时,出现下面的"unknown column 'password' in 'field list'问题 解决办法如下,使用authenticati ...

  10. ajax执行顺序问题

    在一个函数里,执行顺序是先传所有的值到指定url,然后再返回所有的success 解决方法:将ajax改成异步 aysnc:false