<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>绘制几何图形</title>
</head>
<body>
   <!-- fillRect(float x,float y,float width,float height)填充一个矩形区域
    strokeRect(float x,float y,float width,float height)绘制一个矩形边框-->
    <canvas id="myCanvas" width="400" height="600" style="border:3px dashed #000"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        //设置填充颜色
        ctx.fillStyle = "#ccc";
        //填充一个矩形
        ctx.fillRect(30, 30, 250, 100);
        ctx.fillStyle = "#f00";
        ctx.fillRect(40, 100, 150, 150);

//设置线条颜色
        ctx.strokeStyle = "#F3B73F";
        //设置线条的宽度
        ctx.lineWidth = 6;
        ctx.strokeRect(30, 200, 100, 100);

ctx.strokeStyle = "#F57284";
        //设置线条链接点的风格
        ctx.lineJoin = "meter";
        ctx.strokeRect(50, 315, 120, 60);

ctx.strokeStyle = "#B19941";
        ctx.lineJoin = "round";
        ctx.strokeRect(50, 400, 120, 60);

ctx.strokeStyle = "#A6AAA9";
        ctx.lineJoin = "bevel";
        ctx.strokeRect(60, 470, 120, 60);
    </script>
</body>
</html>

HTML5绘制几何图形的更多相关文章

  1. HTML5实现绘制几何图形

    HTML5新增了一个<canvas.../>属性.该元素自身并不绘制图形,只是相当于一张空画布.如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript ...

  2. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  3. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  4. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. Cocos2D中使用CCDrawNode绘制几何图形崩溃的解决

    在cocos2D v3.x中已经不能像在v2.x中那样直接调用ccDrawXXX函数来绘制几何图形了. 我们可以使用CCDrawNode或者CCRenderer来绘制图形. 但是官方的Api手册中说的 ...

  6. Win10系列：VC++绘制几何图形2

    新建了Direct2D中的资源后,接下来初始化用于绘制图形的应用窗口.在解决方案资源管理器窗口中右键点击项目图标,在弹出的菜单栏中选中"添加", 并在"添加"的 ...

  7. Win10系列：VC++绘制几何图形1

    本小节主要介绍如何使用Direct2D来绘制几何图形,其中会使用到FillGeometry函数和FillEllipse函数,FillGeometry函数用于填充几何图形的内部区域,而FillEllip ...

  8. 用HTML5绘制的一个星空特效图

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. OpenGL入门学习 课程 (三) 绘制几何图形的一些细节问题

    http://oulehui.blog.163.com/blog/static/79614698201191832753312/ 先回顾一下我们都学习了些什么: 第一课,编写第一个OpenGL程序第二 ...

随机推荐

  1. PHP进程及进程间通信

    一.引言 进程是一个具有独立功能的程序关于某个数据集合的一次运行活动.换句话说就是,在系统调度多个cpu的时候,一个程序的基本单元.进程对于大多数的语言都不是一个陌生的概念,作为"世界上最好 ...

  2. .axf 转化 .bin文件 的方法

    按住shift 右击按键,进入在 X:\Program Files\Keil\MDK510\ARM\ARMCC\bin . 中打开命令cmd.exe ,然后进入一下操作. 编译自己的工程,并将&quo ...

  3. Disruptor学习笔记（一）：基本原理和概念

    一.Disruptor基本原理 在多线程开发中,我们常常遇到这样一种场景:一些线程接受用户请求,另外一些线程处理这些请求.比如日志处理中的日志输入和告警.这种典型的生产者消费者场景十分常见,而生产者消 ...

  4. Duilib应用修改程序图标方法(转载)

    转载:http://www.cnblogs.com/lanzhi/p/6468596.html 本文向大家介绍如何修改duilib应用图标,对于win32或者mfc应用来说,我们可以在注册窗口类时指定 ...

  5. springboot整合mybatis将sql打印到日志(转)

    在前台请求数据的时候,sql语句一直都是打印到控制台的,有一个想法就是想让它打印到日志里,该如何做呢? 见下面的mybatis配置文件: <?xml version="1.0" ...

  6. C#中配置文件保存的路径

    http://www.codeproject.com/Tips/350010/Saving-User-Settings-in-Winform-Application 外网上找的资料 winform提供 ...

  7. FAST UA API

    参考: FAST_UA 编程手册 FAST DATA STRUCTURE fast_packet fast_metadata fast_rule fast_flow FAST UA API 1.fas ...

  8. 用 C# 计算 与 java 一致的unix时间戳 （长时间整形 如：1476956079961）

    背景: 调用java提供接口,需要长时间整形作为验证. 预备知识: 1. java 的 System.currentTimeMillis() 计算的长整型,是从1970年1月1日开始,截止当前的毫秒数 ...

  9. ASP.NET Web API 2入门

    1.全局配置 Web API 2之前是这样的配置的: protected void Application_Start() { //未实现特性路由 WebApiConfig.Register(Glob ...

  10. 一些WGS健康体检网站和公司

    1.wegen https://www.wegene.com/ 2.阅己基因 http://www.selfgene.com/