• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5的画布canvas——画出简单的矩形、三角形实例代码
    首先在html页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、width、height。

    复制代码
    代码如下:

    <canvas id="demo" width="600" height="600"></canvas>

    取得canvas对象并取得上下文var cxt=document.getElementById('demo').getContext("2d");其中参数2d是确定的。

    开始绘制，有两种形式，一种是描边（fill），一种是填充（stroke）。

    javascript代码：

    复制代码
    代码如下:

    <script language="javascript">
    var cxt=document.getElementById('demo').getContext("2d");
    cxt.beginPath();
    cxt.fillStyle="#F00";/*设置填充颜色*/
    cxt.fillRect(0,0,200,100);/*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/
    cxt.beginPath();
    cxt.strokeStyle="#000";/*设置边框*/
    cxt.lineWidth=3;/*边框的宽度*/
    cxt.strokeRect(0,120,200,100);
    cxt.beginPath();
    cxt.moveTo(0,350);
    cxt.lineTo(100,250);
    cxt.lineTo(200,300);
    cxt.closePath();/*可选步骤，关闭绘制的路径*/
    cxt.stroke();
    </script>

    效果图：
    上一篇：html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
    下一篇：HTML5 Canvas——用路径描画线条实例介绍
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5的画布canvas——画出简单的矩形、三角形实例代码 html5,的,画布,canvas,画出,