zoukankan      html  css  js  c++  java
  • html5-canvas绘图操作方法

    <script>
    function draw()
    {
        var c=document.getElementById("mycanvas");
        c.width=500;//宽度
        c.height=500;//高度
        var ctx=c.getContext("2d");//声明是2D图
        /*//绘制正方形
        ctx.fillStyle="#ff0000";//绘制图片样式颜色为红色
        ctx.fillRect(0,0,200,200);//起点x轴0,起y轴0,x终点为200,y轴终点为200
        
        //绘制直线
        ctx.moveTo(0,0);//起点x轴0,起y轴0
        ctx.lineTo(200,200);//0,x终点为200,y轴终点为200
        ctx.stroke();//绘直线函数
        
        //绘制圆
        ctx.fillStyle="#ff0000";//填充颜色
        ctx.beginPath();//开始
        //参数贺X100,Y100,半径50,360度,顺时针
        ctx.arc(100,100,50,0,Math.PI*2,true);
        ctx.closePath();//关闭
        ctx.fill();//结算
        */
        //绘制三角形
        ctx.strokeStyle="#ff0000";
        ctx.beginPath();//开始
        ctx.moveTo(25,25);//起点x轴主轴
        ctx.lineTo(150,25);//绘制线
        ctx.lineTo(25,150);//绘制线
        ctx.closePath();//关闭
        ctx.stroke();//绘制线执行
        
    }

    </script>
    <canvas id="mycanvas"></canvas>
    <input type="button" onClick="draw()" value="绘图">

  • 相关阅读:
    ECharts之柱状图 饼状图 折线图
    Vue自定义指令(directive)
    HDU 1231 最大连续子序列
    POJ 2533 Longest Ordered Subsequence
    HDU 1163 Eddy's digital Roots
    HDU 2317 Nasty Hacks
    HDU 2571 命运
    HDU 4224 Enumeration?
    HDU 1257 最少拦截系统
    HDU 2740 Root of the Problem
  • 原文地址:https://www.cnblogs.com/bk7788/p/6684265.html
Copyright © 2011-2022 走看看