绘制正方形

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

      <style>

            canvas{

                  background-color: pink;

            }

      </style>

</head>

<body>

      <!-- 画布标签 -->

      <canvas width="600" height="400"></canvas>

      <!-- canvas 是h5新增的画布标签，默认300*150  在IE 6 7 8下都不能用 有兼容性

           cnavas 自身并不具备绘图的功能

           如果在canvas上面进行绘制，需要获取canvas相关的API，通过canvas API进行绘制

           canvas 可以用于 游戏  数据可视化（数据图表）

      -->

      <script>

                  // 绘制正方形

            // 获取canvas标签

            var cs=document.querySelector('canvas')

            // 获取canvas绘图上下文(canvas绘图的相关API)

            var ctx=cs.getContext('2d')

            // 绘图

            // 01 移动画笔moveTo(x,y) 坐标

            ctx.moveTo(100,100)

            // 02 划线  坐标

            ctx.lineTo(300,100)

            ctx.lineTo(300,300)

            ctx.lineTo(100,300)

            ctx.lineTo(100,100)

            // 以上两行代码只是一个路径，但还没有绘制

            // 03 绘制

            ctx.stroke()

      </script>

</body>

</html>

圆形

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

      <style>

            canvas{

                  background-color: pink;

            }

      </style>

</head>

<body>

      <canvas width="500"  height="500"></canvas>

<script>

            // <!-- 获取标签 -->

            var cs=document.querySelector('canvas')

            // 获取绘图API

            var ctx=cs.getContext('2d')

            // 绘制园

            // arc(x,y,r,star,end,isNI)

            // x y坐标   r半径     star起始弧度  end终止弧度  isNI是否逆时针

            // 角度和弧度的关系  角度/180=弧度/pI

            // 弧度=角度/180*PI

            ctx.arc(100,100,60,0,360/180*Math.PI)

            ctx.stroke()

</script>

</body>

</html>

canvas 画正方形和圆形的更多相关文章

  1. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  2. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

  3. 撩妹技能 get，教你用 canvas 画一场流星雨

    开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

  4. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  5. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  6. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  7. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  8. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  9. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

随机推荐

  1. ForkJoinPool详解

    本文的主要目的是介绍 ForkJoinPool 的适用场景,实现原理,以及示例代码. 说在前面可以说是说明,也可以说下面是结论: ForkJoinPool 不是为了替代 ExecutorService ...

  2. 线程工具类 - CountDownLatch(倒计时器)

    CountDownLatch官方文档 一.原理 CountDownLatch是一个非常实用的多线程控制工具类.Count Down在英文中意为倒计时,Latch意为门闩,可以简单的将CountDown ...

  3. linux下命令行执行Python程序提示no moudle,路径问题

    在ide中执行python程序,已经设置好项目路径中. 但是在cmd中执行程序,所在路径是python的搜索路径,如果涉及到import引用就会报类似ImportError: No module na ...

  4. SpringBoot---事务支持

    1.自动配置的事务管理器 1.1.使用JDBC  作为 数据访问技术  时,SpringBoot  为我们  定义了  PlatformTransactionManager的实现  DataSourc ...

  5. Linux g++ 编译添加 pthread

    If you are going to compile a C program with pthread.h in LINUX using GCC or G++ you will have to us ...

  6. （2）用C语言实现面向对象---封装、继承和多态

    封装:struct中封装成员变量和函数指针. 继承:结构体中嵌套结构体. 多态:子类对象动态指向父类的现象叫多态. void  pFunction2(void) { printf(“函数2”): } ...

  7. vue双向数据绑定对于数组和新增对象属性不能监听的解决办法

    出现数组不能按照索引进行跟新的原因是处于性能考虑的,但是整体数组的增加删除是可以监听到的:对于对象新增属性不能监听是因为没有在生成vue实例时候放进watcher收集依赖. 首先我们先来了解vue数据 ...

  8. div拖拽的问题

    今天看到一篇写的很好的文章,摘抄如下: 思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改变元素位置 设置鼠标当前位置(offsetX, ...

  9. .Net服务组件（ServicedComponent）简介及其使用

    .NET Enterprise Services 为企业应用程序提供重要的基础结构.COM+ 为企业环境中部署的组件编程模型提供服务结构.System.EnterpriseServices命名空间向 ...

  10. apache主要配置详解

    1. # Deny access to the entirety of your server's filesystem. You must # explicitly permit access to ...