介绍下canvas相关的API

介绍下canvas相关的API

月光魔力鸭

2018-08-28 19:46 阅读 417 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
突然来了一个调研任务,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些学生的作品,然后预览啥的,效果还是要全景的效果。 经过一番调查,最终锁定了以前从未接触过的krpano。
在通过chrome浏览器来调用摄像头的时候发现getUserMedia报错,但是本地开发却没有问题,主要原因是https环境的问题。chrome 不允许在非https和非localhost下的非安全环境进行调用。
开发的项目中有使用到微信开发,由于之前偶尔才用一次,也是用的别人的地址和测试号,这里记录下自己的操作。防止后续遗忘。
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
Question from codewar,about all of array combinations.