<!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. java练习:GUIformysql

    代码 笔记: 1.确保导入mysql-connector-java-xxxx-bin.jar 2.sql语句容易出错,例如在组合String的时候漏掉空格 3.设置jlist的方法有很多种,具体参考a ...

  2. 重启eclips后启动项目出现监听文件找不到

    重启eclips后启动项目出现监听文件找不到 问题: 重启eclips后启动项目出现Error configuring application listener of class com.thinkg ...

  3. 05: 配置yum源

    1.1 将镜像复制到本地创建yum源 1.将准备好的系统镜像放到指定的目录,本次目录指定在:/dawnfs/sourcecode 2.创建挂载目录:mkdir /mnt/yum 3.挂载镜像: mou ...

  4. 20145118《Java程序设计》 第8周学习总结

    20145118<Java程序设计> 第8周学习总结 教材学习内容总结 1.Java SE提供了日志API,可以基于标准调用,用于记录.java.util.logging包提供了日志功能相 ...

  5. POJ2528 Mayor's posters（线段树&区间更新+离散化）题解

    题意:给一个区间,表示这个区间贴了一张海报,后贴的会覆盖前面的,问最后能看到几张海报. 思路: 之前就不会离散化,先讲一下离散化:这里离散化的原理是:先把每个端点值都放到一个数组中并除重+排序,我们就 ...

  6. [luoguP1119]灾后重建

    题目链接 毒瘤题 卡spfa 可能dij也卡,没试过 然后放floyd过了 但其实spfa很好打,虽然只有60 让我们来分析一下spfa的效率,假设这个出题人极其毒瘤,出网格图 又因为是在线询问,所以 ...

  7. U盘中病毒了怎么办

    声明: 该方案仅是我处理自己U盘的心得,如果您看到这篇文件,并使用此方法,有任何数据丢失或者损失,我概不负责 问题: U盘里面显示占用了空间,就是看不到文件,或者仅有一两个自己不认识的文件 处理方案: ...

  8. 关于在iBatis中配置Oracle以及MySQL 自增字段

    <insert id="insertPerson" parameterClass="person"> <!-- MySQL数据库自增字段的控制 ...

  9. html js 捕捉鼠标右键事件，按下滚轮事件，左键点击事件

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

  10. S4 对象系统

    上一节中,我们介绍了 S3 系统.与大多数其他编程语言的面向对象系统不同,与那些类被定义为固定结构,且随着程序编译有确定的方法分派的系统相比,S3 系统显得非常不严谨.当我们定义一个 S3 类时,几乎 ...