绘制正方形

<!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. sysbench github & manual

    sysbench github https://github.com/akopytov/sysbench sysbench-manual.pdf https://github.com/mrivandu ...

  2. luogu P3411 序列变换

    链接 P3411 序列变换 如果要最小化答案,那么就最大化不移动的数. 那么不移动的子序列一定是最后答案的一段连续区间,而移动的数我们是一定有办法把他们还原的. 设\(f_{i}\)表示\(i\)点的 ...

  3. 印度黑客滥用移动设备管理服务MDM监视iPhone用户

    两周前首次亮相的印度高度针对性的移动恶意软件广告系列已被发现是针对多种平台的广泛广告系列的一部分,包括Windows设备,也可能是Android. 在本月早些时候,Talos威胁情报部门的研究人员发现 ...

  4. 获取不到最新的url地址展示图片可以盖时间戳

    如:  $("#"+attachId).on('click', function() {                 params1 = [];                 ...

  5. Test 6.24 T2 集合

    问题描述 有一个可重集合,一开始只有一个元素 0. 你可以进行若干轮操作,每轮你需要对集合中每个元素 x 执行以下三种操作之一: 将 x 变为 x+1; 选择两个非负整数 y,z 满足 y+z=x , ...

  6. 分页框架pager-taglib学习笔记

    说到分页其实可以研究一下我自己项目里面的分页框架的使用. 下面的笔记来自于孔浩老师的视频教程和我自己的开发实践. 使用Pager-taglib可以帮助我们快速开发分页处理. 下载:pager-tagl ...

  7. git错误处理

    1.今天 当我  执行  git add  somefile 的时候,出现 如下 错误: If no other git process is currently running, this prob ...

  8. face_recognition开源人脸识别库：离线识别率高达99.38%

    基于Python的开源人脸识别库:离线识别率高达99.38%——新开源的用了一下感受一下 原创 2017年07月28日 21:25:28 标签: 人脸识别 / 人脸自动定位 / 人脸识别开源库 / f ...

  9. Linux远程登录工具XShell安装

    Xshell就是一个远程控制RHEL的软件:其他的还有很多,用什么都无所谓(根据公司情况). 下面我们来安装下这个工具: 双击exe 点下一步: 选 免费的 然后下一步:(免费的功能足够用了) 点接受 ...

  10. springboot编程之全局异常捕获

    springboot编程之全局异常捕获 1.创建GlobalExceptionHandler.java,在类上注解@ControllerAdvice, 在方法上注解@ExceptionHandler( ...