h5API_画布

最新推荐文章于 2022-08-31 16:50:06 发布

A_是泽瑜呀

最新推荐文章于 2022-08-31 16:50:06 发布

阅读量84

点赞数

分类专栏：前端文章标签： css javascript css3 es6 前端

本文链接：https://blog.csdn.net/weixin_47465067/article/details/108391966

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <script type="text/javascript"></script>
    <script>
        window.onload=function(){
            //1.获取画布
            var canvas=document.getElementById("canvas");
            //2.获取画笔(获取上下文对象)
            var cx=canvas.getContext("2d");
            //3.设置画笔样式
            cx.fillStyle='red'; //实心画笔样式
            cx.strokeStyle='blue'; //空心画笔样式            

            //4.绘制图形
                // 1.绘制矩形 1-2起始坐标 3-4 宽度，高度
                // cx.fillRect(0,0,100,50);  //实心矩形红色
                // cx.strokeRect(100,100,100,50); //空心矩形蓝色
                
                // 2.绘制圆形1-2圆心坐标 3半径 4-5起始角和结束角 6是否按逆
                // cx.beginPath();                
                // cx.arc(200,200,100,0,Math.PI*2);   //圆
                // cx.arc(200,200,100,0,Math.PI,true); //半圆
                // cx.arc(200,200,100,0,Math.PI/3,false); //弧
                // cx.closePath();  //关闭路径，弧线
                // cx.fill();  //实心圆 红色 
                // cx.stroke(); //空心圆 蓝色

                // 3.绘制线段
                // cx.lineWidth=5;  //线段粗细
                // cx.beginPath(); 
                // cx.moveTo(0,0);
                // cx.lineTo(100,100);
                // cx.lineTo(200,10); 
                // cx.lineTo(300,100); 
                // cx.closePath(); //路径封闭
                // cx.stroke();

                // cx.moveTo(0,200);
                // cx.lineTo(200,200); 
                // cx.stroke();

                // 4.绘制渐变图形
                // 线性渐变
                // var g=cx.createLinearGradient(0,0,200,200);
                // g.addColorStop(0.2,"red");
                // g.addColorStop(0.6,"pink");
                // g.addColorStop(1,"blue");
                // cx.fillStyle=g;
                // cx.fillRect(0,0,200,200);

                // 径向渐变,围绕圆的半径向外渐变？？？？？？？
                // var g=cx.createRadialGradient(200,200,50,100,100,200); //起始圆终点圆坐标
                // g.addColorStop(0.2,"red");
                // g.addColorStop(0.5,"orange");
                // g.addColorStop(1,"green");
                // cx.fillStyle=g;
                // // cx.fillRect(0,0,400,400);

                // cx.beginPath(); 
                // cx.arc(200,200,200,0,Math.PI*2);
                // cx.closePath();
                // cx.fill();

                // 5.平移，扩大,变形
                // 保存和回滚
                // cx.save();
                // cx.fillRect(0,0,100,50);
                // cx.translate(100,100);  //把坐标轴移了
                // cx.save();
                // cx.scale(2,2);    //坐标轴放大
                // cx.save();
                // cx.rotate(Math.PI/3); //坐标轴旋转60度
                // cx.save();
                // cx.fillRect(0,0,100,50);

                // cx.restore();
                // cx.restore();
                
                // cx.fillRect(120,0,100,50);
                
                // 6.图形组合
                // cx.fillRect(100,100,100,100);
                // cx.globalCompositeOperation="destination-over"; 
                // cx.beginPath(); 
                // cx.arc(200,200,50,0,Math.PI*2);
                // cx.closePath();
                // cx.fillStyle="blue";
                // cx.fill();

                // 7.绘制文本
                cx.font="20px blod";
                cx.fillText("hello",200,200); //实心红色
                cx.strokeText("world",200,100); //空心 蓝色




        }

    </script>
   

</head>
<body>
    <canvas width="400px" height="400px" id="canvas" style="background-color:#ccc"></canvas>
</body>
</html>

A_是泽瑜呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5API_画布

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas</title> <script type="text/javascript"></
复制链接

扫一扫