JS关于canvas画布小笔记
2020-04-01 19:06
931 查看
JS画布笔记
1、 实现画布
var canvas = document.getElementById(“mycanvas”);
var ctx = canvas.getContext(“2d”);
2、绘制圆弧
ctx.arc(x,y,r,起始角,结束角,顺逆时针绘制);
- 圆心坐标(x,y)
- 半径r
- 起始角-结束角范围:0-Math.PI*2
- 顺时针绘制:false
- 逆时针绘制:true
3、绘制直线
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
- 起点坐标(x1,y1)
- 终点坐标(x2,y2)
- 将两点连接:stroke();
4、绘制矩形
填充矩形
ctx.fillRect(x,y,width,height);
矩形框框
ctx.strokeRect(x,y,width,height);
5、避免画的图形连接在一起
ctx.beginPath();
ctx.closePath();
6、填充
ctx.fill();
7、设置填充颜色
ctx.fillStyle=“red”;
8、设置透明度
ctx.globalAlpha=0.5;
9、状态的保存与恢复
ctx.save(); //保存当前canvas状态
ctx.restore();//返回最后保存的canvas状态
10、将坐标原点移动
示例:
ctx.translate(250,200);
表示将坐标原点(x=0,y=0)移动了250和200,
即坐标原点改变为(250,200)。
11、旋转
ctx.rotate(30*Math.PI/180);
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- canvas学习笔记(一)——关于css设置canvas画布大小的问题
- canvas学习笔记——关于css设置canvas画布大小的问题
- 【自学笔记】web前端 javascript笔试题 关于各种==的比较,js隐式转换
- HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)
- vue饿了么学习笔记(1)关于dev-server.js消失的问题
- 【js学习笔记-110】--------<canvas>中的图形
- 关于.NET MVC、Razor以及JS的笔记
- cocos2dx js 关于canvas绘图模糊问题及解决办法
- JS笔记-关于Date()类的用法详解
- react.js关于props传值-小笔记
- 关于sea.js的笔记
- 关于JS高程的笔记(一到三章)
- 关于js局部、全局变量以及生存期的笔记
- 关于原生js中ajax部分的学习笔记
- 【笔记】关于require.js 的用法
- 关于js中的onreadystatechange学习笔记
- 学习笔记:Stage.js(又叫Cut.js)——2D canvas 开发库,游戏方面的
- 关于canvas的小笔记
- 【笔记】js 关于定时器的理解
- 关于原型。闭包的学习计划(JavaScript高级进阶)js高级第一天笔记