zoukankan      html  css  js  c++  java
  • Canavs初学


    <
    canvas id="canvas" style="border:1px solid #f00;"></canvas>

    公用js:

    var canvas = document.getElementById("canvas");
    canvas.width = 600;
    canvas.height = 600;//此处也可直接在标签中添加width height属性
    var context = canvas.getContext("2d");

    绘制直线:

    context.moveTo(100,100);//状态
    context.lineTo(200,200);//状态  直线
    context.lineWidth = 6;
    context.strokeStyle = "#00f";
    context.stroke();//绘制边框

    效果如图:

    绘制三角形(空心):

    context.moveTo(100,100);//状态  起点
    context.lineTo(200,200);//状态  直线
    context.lineTo(100,200);
    context.lineTo(100,100);//直角三角形
    
    context.lineWidth = 6;//边框宽度
    context.strokeStyle = "#00f";//边框颜色
    context.stroke();//绘制边框

    效果如图:

    从效果图中可以看出最后的点并没有完全闭合,此处可使用lineCap属性,在上面代码中加上

    context.lineCap="round";//butt,round,square

    效果如下:

    只有最后一点是圆形,而另外两个角处是非圆形(???????)

    绘制三角形(实心):

    context.moveTo(100,100);//状态  起点
    context.lineTo(200,200);//状态  直线
    context.lineTo(100,200);
    context.lineTo(100,100);//直角三角形
    
    context.lineWidth = 6;
    context.lineCap = "round";
    context.strokeStyle = "#00f";
    context.stroke();//绘制边框(边框不能完全闭合??????)
    
    context.fillStyle="rgb(255,0,0)";
    context.fill();//填充背景色

    效果如图:

    在三角形(实心)基础上绘制另一条直线:

    context.moveTo(100,100);//状态  起点
    context.lineTo(200,200);//状态  直线
    context.lineTo(100,200);
    context.lineTo(100,100);//直角三角形
    
    context.lineWidth = 6;
    context.lineCap = "round";
    context.strokeStyle = "#00f";
    context.stroke();//绘制边框(边框不能完全闭合??????)
    
    context.fillStyle="rgb(255,0,0)";
    context.fill();//填充背景色
    //绘制另一条直线
    context.moveTo(200,100);
    context.lineTo(300,200);
    context.strokeStyle="#0f0";
    context.lineWidth = 2;//此处宽度比上面宽度小,因此三角形边框最内侧会被新边框覆盖
    context.stroke();

    效果如图:注意三角形边框(设置宽度不同)

    若将第二个的lineWidth 也设置为6,效果如下图:

    //绘制另一条直线
    context.moveTo(200,100);
    context.lineTo(300,200);
    context.strokeStyle="#0f0";
    context.lineWidth = 6;//此处宽度:2时比上面宽度小,因此三角形边框最内侧会被新边框覆盖
    context.stroke();
    
    context.fillStyle="#00f";
    context.fill();

    三角形边框宽度明显不为6(???????)

    绘制不同路径使用beginPath及closePath:

    context.beginPath();//开启
    context.moveTo(100,100);//状态  起点
    context.lineTo(200,200);//状态  直线
    context.lineTo(100,200);
    context.lineTo(100,100);//直角三角形
    context.closePath();//关闭
    
    context.lineWidth = 6;
    context.lineCap = "round";
    context.strokeStyle = "#00f";
    context.stroke();//绘制边框(边框不能完全闭合??????)
    
    context.fillStyle="rgb(255,0,0)";
    context.fill();//填充背景色
    //绘制另一条直线
    context.beginPath();//开启
    context.moveTo(200,100);
    context.lineTo(300,200);
    context.closePath();//关闭
    
    context.strokeStyle="#0f0";
    context.lineWidth = 6;//此处宽度:2时比上面宽度小,因此三角形边框最内侧会被新边框覆盖
    context.stroke();
    
    context.fillStyle="#00f";
    context.fill();
  • 相关阅读:
    Microsoft NLayerApp“.NET研究”案例理论与实践 项目简介与环境搭建 狼人:
    .NET中的“.NET研究”异步编程:使用F#简化异步编程 狼人:
    ASP.NET MV“.NET研究”C3 基础教程 – Web Pages 1.0 狼人:
    引用“.NET研究”类型赋值为null与加速垃圾回收 狼人:
    使用WCF实现SOA面向服务编程“.NET研究”—— 架构设计 狼人:
    MEF——.NET中值“.NET研究”得体验的精妙设计 狼人:
    Silverlight“.NET研究” 2.5D RPG游戏技巧与特效处理:(十)空间分层战斗系统 狼人:
    再次分享一个多选文件上传方案“.NET研究” 狼人:
    C#中标准Dis“.NET研究”pose模式的实现 狼人:
    .NET中的异步编程 IO完成端口以及FileStream.“.NET研究”BeginRead 狼人:
  • 原文地址:https://www.cnblogs.com/loveamyforever/p/8157435.html
Copyright © 2011-2022 走看看