canvas画布的宽高应写在<canvas>标签里
来源:互联网 发布:寻艺电视剧网络播放量 编辑:程序博客网 时间:2024/05/17 08:17
(转载自http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2724244.html)
以前用canvas画图时,都是直接在canvas标签里直接写上宽高,没有问题,但也没有探究过为什么宽高要直接写在canvas标签里,因为各个资料的例子上都是这么写的。今天王sir提出了一个问题:如果把宽高写在<style>里,看看会有什么不同。自己试了以下,果然有问题。
先看一下代码:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><meta name="Keywords" content=""><meta name="author" content="@my_programmer"><style type="text/css"> body{margin:0;} canvas{margin:20px; /*width: 400px; height: 300px;*/ } </style></head><body onload="draw()"> <canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas><script> function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); context.beginPath(); context.moveTo(20,20); context.lineTo(200,100); context.lineWidth=5; context.stroke(); }</script></body></html>
1.宽:400;高:300;直接写在<canvas>里的效果:
2、删除<canvas>里的宽高,宽:400;高:300;写在<style>里的效果:
为什么两者的效果会不一样呢?
canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。所以,在canvas绘图时,应该在canvas标签里直接定义宽高。
0 0
- canvas画布的宽高应写在<canvas>标签里
- Canvas(画布)的使用
- Canvas 画布的属性
- canvas画布的用法
- h5的画布Canvas
- canvas画布的使用
- Canvas画布
- Canvas画布
- Canvas(画布)
- canvas画布
- Canvas 画布
- canvas画布
- Canvas画布
- canvas画布
- 画布canvas
- Canvas 画布
- canvas画布
- Canvas画布
- Android实现简单地APP欢迎页面
- python网络爬虫 - 如何伪装逃过反爬虫程序
- 进程
- nanopi2配置流程
- Linux下安装Python3
- canvas画布的宽高应写在<canvas>标签里
- 论近代商人宗族与宗族文化的发展演变
- 电商之梳理spring相关知识---开发基础框架
- 【CI/CD】几种常见的不停机发布方式
- 实习入职第二十天:Android 中文 API(123) —— AbsListView
- Caffe 学习进度
- Codeforces Round #356 Bear and Tower of Cubes(数学)
- 如何使用hugo搭建个人博客(五):添加站内搜索(gcse)
- SQLPLUS的 set配置(结合spool)