画布canvas标签，并且在画布上画简单的形状

最新推荐文章于 2021-03-11 10:14:23 发布

我是大头鸟

最新推荐文章于 2021-03-11 10:14:23 发布

阅读量895

点赞数

分类专栏： HTML 文章标签： canvas 标签

本文链接：https://blog.csdn.net/datouniao1/article/details/52103686

版权

HTML 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

今天整画布，半天下来老是错，结果:

<canvas id = 'c1' width="400" height="400">
    <p>浏览器不支持</p><!--width:300 height:150-->
</canvas>

原来画布的宽度和高度需要在标签定义的时候确定，并且后面是不能带有px这个单位的，比如:

错误的定义：

#c1
{
    background: white;
    position: absolute;
    left: 200px;
    top: 10px;
    width:400px;
    height:400px;
}

oGC.fillStyle = 'yellow';
oGC.fillRect(10,10,200,100);//(x,y,w,h)这个是画一矩形，默认的填充的是黑色
还应该知道的是这样矩形填充的颜色必须在画矩形之前做
oGC.strokeStyle = 'red';//这个是表示划线的颜色设置
这个也是画一个矩形，这个是默认没有填充的，或者说是白色的
oGC.strokeRect(10.5,100.5,100,80);

oGc.fillStyle="green";
oGc.strokeStyle="red";

oGc.beginPath();//声明
oGc.moveTo(10,20);//开始位置


oGc.lineTo(60,80);//目标位置
oGc.stroke();
oGc.lineTo(100,190);
oGc.stroke();
oGc.lineTo(10,20);
oGc.stroke();
 oGc.fill();//想要填充指定的颜色，需要用到fillStyle="green"
//            还有就是fill()，并且这个fill()是必须在所有的stroke执行之后才进行执行的
oGc.closePath();
在画布上面画线是，首先是beginPath()，moveTo是起点，lineTo是下一个点

stroke()是表示执行画

<!DOCTYPE html>
<html lang="en">
<head>
    <!--画布-->
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style>
        body
        {
            background: gray;
        }
        #c1
        {
            background: white;
            position: absolute;
            left:200px;
            top:20px;
            /*box-shadow: 4px 4px 4px black;*/
        }
    </style>
    <script>
        window.onload=function(){
//            获取画布
            var oCan=document.getElementById("c1");
            var oGc=oCan.getContext("2d");
//            oGc.fillStyle="yellow";//给内部填充颜色
          //  oGc.fillRect(10,10,200,100);//画一个矩形默认的填充为黑色
//           填充一个矩形，坐标，宽和高
         //   oGc.fillStyle='red';//填充矩形要在该矩形画之前进行
           // oGc.fillRect(0,0,100,50);
           //   oGc.strokeStyle="red";
  //          oGc.strokeRect(10.5,100.5,100,80);//前面是
//             oGc.strokeRect(10.5,100.5,100,80);
//
        //   oGc.strokeText("你好");
            oGc.fillStyle="green";

            oGc.strokeStyle="red";
            oGc.beginPath();//声明

            oGc.moveTo(10,20);//开始位置
            oGc.lineTo(60,80);//目标位置

            oGc.stroke();
            oGc.lineTo(100,190);
            oGc.stroke();
            oGc.lineTo(10,20);
            oGc.stroke();
           oGc.fill();//想要填充指定的颜色，需要用到fillStyle="green"
//            还有就是fill()，并且这个fill()是必须在所有的stroke执行之后才进行执行的
            oGc.closePath();
        }
    </script>
</head>
<body>
<canvas id="c1" width="400" height="400">
    <!--默认的大小是width=300，height=150-->
</canvas>
</body>
</html>

我是大头鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
画布canvas标签，并且在画布上画简单的形状

今天整画布，半天下来老是错，结果:id = 'c1' width="400" height="400"> 浏览器不支持原来画布的宽度和高度需要在标签定义的时候确定，并且后面是不能带有px这个单位的，比如:错误的定义：#c1{ background: white; position: absolute; left: 200px;
复制链接

扫一扫