<!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. loj10009 P1717 钓鱼

    P1717 钓鱼 贪心+优先队列 先枚举最后走到哪个湖,然后用优先队列跑一遍贪心即可 #include<iostream> #include<cstdio> #include& ...

  2. 20144303石宇森 《网络对抗》 WEB基础实践

    20144303石宇森 <网络对抗> WEB基础实践 实验后回答问题 一.什么是表单 表单是一个包含表单元素的区域.用form来定义. HTML是静态显示网页的,无法跟服务器进行交互,所以 ...

  3. noip2007部分题

    1.统计数字 题目描述 Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*109).已知不相同的数不超过10000 个,现在需要统计这些自然数各自出现 ...

  4. tensorflow的写诗代码分析【转】

    本文转载自:https://dongzhixiao.github.io/2018/07/21/so-hot/ 今天周六,早晨出门吃饭,全身汗湿透.天气真的是太热了!我决定一天不出门,在屋子里面休息! ...

  5. 主引导记录MBR的结构和作用

    MBR磁盘分区都有一个引导扇区,称为主引导记录,英文简称为MBR.1. MBR的结构MBR扇区位于整个硬盘的第一个扇区:按照C/H/S地址描述,即0柱面〇磁头1扇 区:按照LBA地址描述即0扇区.它是 ...

  6. JVM类加载机制总结

    1.运行时加载优点 提高灵活性,可以在运行时动态加载,连接.例子:面向接口编程,动态绑定实现类(但C++也有动态绑定,说明动态绑定不一定通过运行时加载Class字节码实现,也可能是机器码支持的) 2. ...

  7. 【Maven】2.使用Nexus3搭建Maven私服+上传第三方jar包到本地maven仓库

    参考文章: http://www.cnblogs.com/luotaoyeah/p/3791966.html --------------------------------------------- ...

  8. [Pytorch]Pytorch中tensor常用语法

    原文地址:https://zhuanlan.zhihu.com/p/31494491 上次我总结了在PyTorch中建立随机数Tensor的多种方法的区别. 这次我把常用的Tensor的数学运算总结到 ...

  9. C#删除和清空文件夹的程序

    /// <summary> /// 清空指定的文件夹,但不删除文件夹 /// </summary> /// <param name="dir"> ...

  10. python 元组元素反转

    #create a tuple x = ("w3resource") # Reversed the tuple y = reversed(x) print(tuple(y)) #c ...