HTML5 function records

JavaScript绘图与文本测量

最新推荐文章于 2025-09-07 01:02:55 发布

weixin_33841722

最新推荐文章于 2025-09-07 01:02:55 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/nickwill/blog/196549

本文介绍了使用JavaScript的Canvas API进行绘图的基本方法，包括绘制圆形、清除矩形区域及测量文本宽度等功能，并提供了示例代码说明如何实现这些功能。

2019独角兽企业重金招聘Python工程师标准>>>

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

context.arc(x,y,radius,0,Math.Pi*2,true);
//(x,y)原点坐标，（0,Math.PI*2)表示弧线的起始位置，(ture)表示逆时针，false(顺时针)，该函数没有实际画出线条，还需要context.stroke(),才能实际画成功。

//测量字体的宽度

var strWidth = context.measureText(str).width;
//str可以是一个字面量或者一个变量。
//measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

var canvas = document.querySelector('#canvas');
//querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。很像jquery的选择器。不过只能返回一个子孙元素，但是jquery选择器的话，可以返回一组元素集合。下面的代码示例：
<body>
       <div id="query">id</div>
       <div class="query">class</div>
</body>
<script>
  var htmlStr= document.querySelector("body #query").innerHTML，//id
  htmlStr=document.querySelector("body div").innerHTML,//只返回第一个子孙元素
  htmlStr=document.querySelector( "body .query).innerHTML //class
</script>
//这个函数适用 IE8+，chrome，firefox

canvas.getBoundingClientRect();

function windowToCanvas(canvas,x,y){
    var bbox = canvas.getBoundingClientRect();
    return { x: x - bbox.left * (canvas.width /bbox.width),
             y: y - bbox.top *  (canvas.height /bbox.height)
    };
}
//该函数把鼠标坐标映射为canvas坐标，getBoundingClientRect()返回canvas的边界框，还对坐标进行缩放--P5。

context.clearRect(x,y,width,heigth);

//clearRect() 方法清空给定矩形内的指定像素。

NumberObject.toFixed(num);

//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
//比如num设置为0，就是整数，如果为1，就是带一位小数点的浮点数，如2.1等。规定是0~20，如果未设num，那就默认为0。

context.drawImage(image,x,y)

drawImage(image,x,y,width,height) //可以进行缩放
drawImage(image,srcX,srcY,srcWidth,srcHeight,desX,desY,desWidth,desHeight)//通用格式

转载于:https://my.oschina.net/nickwill/blog/196549