<!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. Python3 识别验证码（opencv-python）

    Python3 识别验证码(opencv-python) 一.准备工作 使用opencv做图像处理,所以需要安装下面两个库: pip3 install opencv-python pip3 insta ...

  2. mysql jdbc性能优化之mybatis/callablestatement调用存储过程mysql jdbc产生不必要的元数据查询（已解决，cpu负载减少20%）

    INFO | jvm 1 | 2016/08/25 15:17:01 | 16-08-25 15:17:01 DEBUG pool-1-thread-371dao.ITaskDao.callProce ...

  3. 03：requests与BeautifulSoup结合爬取网页数据应用

    1.1 爬虫相关模块命令回顾 1.requests模块 1. pip install requests 2. response = requests.get('http://www.baidu.com ...

  4. 01: JavaScript实例

    1.1 基础 JavaScript 实例 <body> <script type="text/javascript"> document.write(&qu ...

  5. 重写（override）与重载（overload）的区别

    一.重写(override) override是重写(覆盖)了一个方法,以实现不同的功能.一般是用于子类在继承父类时,重写(重新实现)父类中的方法. 重写(覆盖)的规则: 1.重写方法的参数列表必须完 ...

  6. Ruby基础教程

    一.Ruby基础知识 1.关于Ruby Ruby是脚本语言 Ruby是面向对象语言 Ruby是跨平台语言 Ruby是开放源码软件 2.Ruby入门书籍推荐 <Ruby.Programming向R ...

  7. spring-boot-devtools 实现热部署

    1.devtools spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot ...

  8. 使用CLR Profiler查看C#运行程序的内存占用情况

    http://blog.csdn.net/wy3552128/article/details/8158938 https://msdn.microsoft.com/en-us/library/ff65 ...

  9. grpc python quickstart

    参考:grpc python quickstart 准备 1.升级pip $ python -m pip install --upgrade pip 2.安装grpc $ python -m pip ...

  10. Java I/O学习 文件读写工具

    import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundException; import jav ...