zoukankan      html  css  js  c++  java
  • HTML5之canvas-1画布矩形

    绘制步骤

    获取canvas对象

    var oCanvas = document.getElementById("canvas");

    取得上下文context

    var context = oCanvas.getContext("2d");

     绘制图形

    根据需求选择方法

    绘制长方形/边框/填充色彩

    Context.lineWidth=1;

    Context.fillRect(x,y,width,height);

    Context.strokeRect(x,y,width,height);

    <html>
        <head>
            <meta charset="UTF-8">
            <title>画布-矩形</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        </head>
        <body>
            <canvas id="canvas" width="500" height="500"></canvas>
            <script type="text/javascript">
            //必要的两个条件
            //1.获取canvas对象
            var oCanvas = document.getElementById("canvas");
            //2.取得上下文context
            var context = oCanvas.getContext("2d");
            
            //一.context做操作,绘制图形
            //1.颜色,css样式
            context.fillStyle= "#ededed";
            //2.起点终点宽度高度,执行,fillRect填充矩形,有填充
            context.fillRect(0,0,500,500);
            
            context.fillStyle = "red";
            context.fillRect(50,50,100,100);
            //边框,strokeRect无填充,strokeStyle默认黑色
            context.strokeStyle = '#40bfe0';
            context.lineWidth = '4';   //框的宽度,默认1
            context.strokeRect(50,50,100,100);
            
            </script>
        </body>
    </html>
  • 相关阅读:
    OpenCV/python读取,显示,保存图像
    机器学习的基本分类
    Qt Designer常用部件介绍
    C#数据类型列表
    SQL-Base 函数
    SQl 基本函数
    SQL 插入数据
    SQL-Base 用表组织数据
    SQLserver的基本用法
    C#MyBank(自己的看法,转账有点小问题)
  • 原文地址:https://www.cnblogs.com/Abner5/p/5843963.html
Copyright © 2011-2022 走看看