关于技术您现在的位置是:首页 > 关于技术

了解H5 canvas的宽高对画布的影响

头像 2019-08-12 15:58:31 16 人已围观 0 条评论

简介

总结: 1. canvas元素有默认宽高,宽300px,高150px; 2. 给canvas元素设置宽高两种方 […]

总结:

1. canvas元素有默认宽高,宽300px,高150px;

2. 给canvas元素设置宽高两种方法:

一,在元素行间设置,

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

二,在js中使用canvas API操作,

var ctx = document.getElementById("canvas"),
    ctx = ctx.getContext("2d");
    ctx.width = 200;
    ctx.height = 200;

3. 通过css样式来给canvas设置的宽高,与canvas默认值不一致时,会使画出的图像拉伸变形;

例:

var ctx = document.getElementById("canvas");
    ctx = ctx.getContext("2d");
    ctx.style.width = "200px";
    ctx.style.height = "200px";

4. canvas的宽高不能用百分比表示,canvas会忽略百分号,只取百分比数值显示。

详细分析狠戳demo,我们,加油!

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号