介绍下canvas相关的API

介绍下canvas相关的API

月光魔力鸭

2018-08-28 19:46 阅读 392 喜欢 0 canvas api canvas的API

用于自己加强记忆防止遗忘,当然还可以回头再看。

ctx

var ctx = el.getContext('2d');

检查是否支持canvas

if(el.getContext){
    var ctx = el.getContext('2d');
}

矩形-绘制一个填充的矩形

ctx.fillRect(x,y,width,height);

矩形-绘制一个矩形的边框

ctx.strokeRect(x,y,width,height);

矩形-清楚矩形区域

ctx.clearRect(x,y,width,height);

路径

//1.创建起点
ctx.beginPath();
//2.移动到某点
ctx.moveTo(x,y);
//3.绘制一条线,从当前点,到目标点
ctx.lineTo(x,y);
//4.通过线条来绘制图形轮廓
ctx.stroke();
//5.填充路径的内容区域为实心
ctx.fill();//会自动闭合
//6.关闭路径
ctx.closePath()

圆弧

//以(x,y) 为原点,radius 为半径,从startAngle开始到endAngle结束,方向默认顺时针
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);

//角度与弧度计算---,在arc中使用的是弧度,不是角度
radians=(Math.PI/180)*degrees

上色

//color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象,默认黑色
ctx.fillStyle='white';//填充白色
ctx.strokeStyle='blakc';//边框黑色

转载请注明出处: https://chrunlee.cn/article/canvas-api.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
最近一直在想着抓一些网盘数据,进行资料归拢,可是当我真正开始的时候.. 还是遇到了反爬,当然我本身就有心理预期,这是肯定会碰到的,只是没想到会在代理IP上耗费这么久,之前的时候也处理过代理IP ,可是由于一知半解,导致很多配置都不理解,debug全靠猜...
有时候浏览网页经常会看见一些页面出现一些打字的效果,那么是怎么实现的呢?
this 是 JavaScript 的一大难点,多年经验的前端程序员都可能对这方面模糊。this 在大量的函数、类库中都有使用,理清显式绑定和隐式绑定有助于理解或书写这类函数。
通过jspdf ,我们可以将页面或图片生成pdf下载下来,如果是一些复杂的页面,我们可以将页面转成图片,然后把图片加入到pdf中,生成并下载。
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
Question from codewar,about all of array combinations.