画布

最新推荐文章于 2024-02-29 11:34:52 发布

ddlovebaby

最新推荐文章于 2024-02-29 11:34:52 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/ddlovebaby/article/details/90181749

版权

画布

/*
* 角度: 一个愿是360°
* 半径: 从圆心到圆上任意一点的线叫半径设置为 r
* 周长: 圆边长的总和计算圆的周长 : 2πr
*
* 弧度: 一种长度单位 , 两条射线从圆心向圆周射出, 形成的一个夹角, 而夹角所正对的那条线段叫做弧度
* 当这个弧长正好等于圆的半径的时候, 两条射线的夹角的弧度为1
*
* 一个圆有多少弧度 : 2πr /r = 2π 一个圆的角度是360度
* 一个角度等于多少弧度 = 2π /360 = π/180
*
*
*
*
* */
var myCanvas = document.querySelector(“canvas”);
var ctx = myCanvas.getContext(“2d”);

//需求: 六等分的圆, 每一个等分是不同的随机颜色
var w = ctx.canvas.width;
var h = ctx.canvas.height;

var num = 6;
// 一份是多少弧度
var angle = Math.PI*2 / num;

var randomColor = function () {
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    return 'rgb('+r+','+g+','+b+')';

}

var start = 0;//记录起始位置
for(var i = 0; i <num; i++){
    //获取结束位置
    var end = angle + start;
    ctx.beginPath();
    ctx.moveTo(w/2, h/2);
    ctx.arc(w/2, h/2, 150, start, end);
    ctx.fillStyle = randomColor();
    ctx.fill();
    //下一个起始位置就是上一个结束的位置
    start = end;
}

var ctx = document.querySelector(“canvas”).getContext(“2d”);

//创建图片的对象
var img = new Image();
//等图片加载完成之后所执行的函数
img.onload = function () {
    console.log(img);
    //用法一: 三个参数
    //ctx.drawImage(img, 50,50);
    //用法二: 5个参数
    // ctx.drawImage(img, 50,50, 50,50);
    //用法三 : 9个参数
    /*
    * 第一组坐标 : 图片定位的坐标
    * 第二组坐标 : 图片截取多大的区域
    * 第三组坐标 : 绘制在画布上的坐标
    * 第四组坐标 : 图片的大小  是缩放
    * */
    ctx.drawImage(img, 0,0, 300,300,50,50,10,10);
}
//设置图片的路径
img.src = "image/1.jpg";