h5中使用canvas绘制线段、多边形、圆、圆弧


<html>
<head>
    <title>title>
head>
<body>
    <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display: block;margin: 20px auto;">
        当浏览器不支持canvas时显示的内容写在这里,支持时不显示
    canvas>


    <script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas");

        //指定canvas的大小
        /*canvas.width = 1024;
        canvas.height = 768;*/

        if(canvas.getContext("2d")){
            //使用context绘制
            var context = canvas.getContext("2d"); 

            //设置颜色的方法"#005588","rgb(100,0,0)","red"

            //绘制填充多边形
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(50,50);
            context.lineTo(0,50);
            context.lineTo(0,0);
            context.closePath();
            context.fillStyle = "rgb(255,0,0)";//设置填充颜色,不设置不填充
            context.fill();//执行填充绘制
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(50,50);
            context.closePath();
            //绘制边框
            context.lineWidth = 5;//设置边框线宽
            context.strokeStyle = "#005588";//设置边框颜色
            context.stroke();//执行边框绘制


            //绘制线段
            context.beginPath();
            context.moveTo(10,0);
            context.lineTo(60,50);
            context.closePath();
            context.strokeStyle = "black";
            context.stroke();

            //绘制圆弧
            context.beginPath();//重新规划路径
            //arc参数x,y,radius,begindegree,enddegree,最后一个参数确定绘制方向,false为顺时针(默认false),true为逆时针
            context.arc(25,75,25,0,0.5*Math.PI);
            //closePath会自动将不封闭的首尾线段连接起来
            context.closePath();//结束并封闭路径
            context.lineWidth = 2;//圆弧宽
            context.strokeStyle = "red";//圆弧颜色
            context.stroke();

            //绘制填充圆
            context.beginPath();
            context.arc(25,125,25,0,1.5*Math.PI);
            context.strokeStyle = "rgb(0,100,0)";//圆弧填充颜色
            context.fill();
        }else{
            alert("if判断当前浏览器是否支持canvas");
        }
    }

    script>
body>
html>

运行效果
这里写图片描述

你可能感兴趣的:(c++,canvas)