画布的使用

最新推荐文章于 2022-05-03 01:01:04 发布

国服第一程序员

最新推荐文章于 2022-05-03 01:01:04 发布

阅读量174

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43894763/article/details/107444799

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

body：

 <canvas width="1200"height="900" ; style="border: 1px solid black" id="can">
        111
    </canvas>

js：

 var canvas = document.querySelector("#can");
    var context = canvas.getContext("2d");

	//画一个坐标轴
    function draw(a,b,c,d) {
        if (!canvas.getContext){
            return
        }
        var minhei = a;
        var maxhei = b;
        var minwid = c;
        var maxwid = d;
        var lon = (a-b) / 30;
        context.lineWidth = "5";
        context.strokeStyle = "pink";
        context.fillStyle = "yellow";
        context.moveTo(minwid,minhei);
        context.lineTo(minwid,maxhei);

        context.moveTo(minwid,minhei);
        context.lineTo(maxwid,minhei);

        context.moveTo(minwid-lon,maxhei+lon);
        context.lineTo(minwid,maxhei);
        //
        context.moveTo(minwid+lon,maxhei+lon);
        context.lineTo(minwid,maxhei);

        context.moveTo(maxwid-lon,minhei+lon);
        context.lineTo(maxwid,minhei);

        context.moveTo(maxwid-lon,minhei-lon);
        context.lineTo(maxwid,minhei);
        // /*stroke()描边 不会自动闭合
        // * fill()填充  自动闭合
        // * closePath()   自动闭合
        // * */
        context.stroke();
    }
        draw(500,100,100,500);

	 //
	 function drwaRect() {
        context.fillStyle = "blue";
        //context.strokeRect(100,200,300,400);
        //图案填充
        context.fillRect(10,10,30,100);
        //清除一部分的填充
        context.clearRect(5,5,20,50)
    }
    drwaRect();

	function Color(){
        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);
        var col = 'rgba('+ r +','+ g +','+ b +',0.8)';
        return col;
    }
    //生成7x7个随机颜色的方块
	 function drawColor() {
        for (var i = 0 ; i < 7 ; i++){
            for (var j = 0 ; j < 7 ; j++){
                var x = i * 60;
                var y = j * 60;
                var len = 50;
                context.fillStyle = Color();
                context.fillRect(x,y,len,len);
                console.log(Color())
            } }}
   // drawColor();

     //插入文字
     function drawFont() {
        context.font = "30px pink kaiti";
        context.strokeText("hello kugou",800,800);
        context.strokeStyle = "red";
        context.moveTo(0,800);
        context.lineTo(1000,800);
        context.stroke();
        context.textBaseline = "middle"
    }
   // drawFont();