Canvas 宽度、高度设置
在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 属性值。
- 直接在 <canvas> 元素中设置,如下:
<canvas width="300" height="300"></canvas>
注意,这里不是使用 style="width:300px; height:300px“ 去设置。
- 使用 canvas 的属性值设置,如下:
canvas.width = 300;
canvas.height = 300;注意,这里设置值时不需要带单位。
- 使用 setAttribute() 方法设置,如下:
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
另外,可以通过两个常量值去设置其宽度和高度,使其等于屏幕的宽度和高度,分别为 screen.availWidth 和 screen.avail.Height 。
学习资料:Developers-Guide-to-HTML5-Canvas
Canvas 宽度、高度设置的更多相关文章
- fancybox 点击 js脚本判断验证,fancybox的宽度高度设置
当我们在使用fancybox做弹出窗口的时候,可能在弹窗之前就需要判断一些验证条件,例如我这里有个案例,用户必须先得勾选一个 那么怎么做呢?我们用到fancybox的一个onStart方法就可以了 $ ...
- span宽度高度设置
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)
实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- js 获取浏览器/网页宽度高度整理
网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- RecyclerView常见问题解决方案,RecyclerView嵌套自动滚动,RecyclerView 高度设置wrap_content 无作用等问题
1,ScrollView或者RecyclerView1 嵌套RecyclerView2 进入页面自动跳转到recyclerView2上面页面会自动滚动貌似是RecyclerView 自动获得了焦点两 ...
随机推荐
- nyoj_68:三点顺序(计算几何)
题目链接 根据 AB*AC的值进行判断即可(ps,结果为0时不构成三角形) #include<iostream> #include<cstdio> #include<cs ...
- GIT - 代码管理工具之命令集
GIT 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问.它会把你的每次提交的文件的全部内容都会记录下来. GIT特点 速度 简单的设计 对非线性开发 ...
- (转)硬盘分区备忘(主分区,扩展分区和逻辑分区)以及Linux硬盘分区工具parted 介绍
场景:最近在学习Linux的基础知识,不可避免的设计到Linux的磁盘分区,以前做过总结,但是那种总结就是复制别人的文章,总结完就不想看第二遍,所以很容易就遗忘了!清楚明白的理解分区后,我就可以在自己 ...
- 有关java 8
http://www.iteye.com/news/27608 Java 8 发布时间敲定,延期半年 http://www.iteye.com/news/24631/ Java 8 的重要 ...
- OVS故障处理一例
OVS下无法访问内部网站 遇到朋友求助的一个客户问题,环境是这样的,客户在自己的iaas平台(不是openstack)上使用ovs,物理交换机上配置vlan和dhcp service,计算节点的ovs ...
- openstack中使用linux_bridge实现vxlan网络
openstack环境: 1 版本:ocata 2 系统:ubuntu16.04.2 3 控制节点 1个 + 计算节点 1个 4 控制节点网卡为ens33,ip = 172.171.5.200 ens ...
- Android保存图片到本地相册
好久没有写东西了.备份下知识吧.免得忘记了 . 首先贴一段代码 -- 这个是先生成一个本地的路径,将图片保存到这个文件中,然后扫描下sd卡.让系统相册重新加载下 .缺点就是只能保存到DCIM的文 件 ...
- 一步一步深入理解Dijkstra算法
先简单介绍一下最短路径: 最短路径是啥?就是一个带边值的图中从某一个顶点到另外一个顶点的最短路径. 官方定义:对于内网图而言,最短路径是指两顶点之间经过的边上权值之和最小的路径. 并且我们称路径上的第 ...
- mysql控制台出现“unknown column 'password' in 'field list'问题
今天在windows系统上使用MySQL命令时,出现下面的"unknown column 'password' in 'field list'问题 解决办法如下,使用authenticati ...
- ajax执行顺序问题
在一个函数里,执行顺序是先传所有的值到指定url,然后再返回所有的success 解决方法:将ajax改成异步 aysnc:false