JS关于canvas画布小笔记

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);

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);

发布了9 篇原创文章 · 获赞 0 · 访问量 460
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览