文章地址：https://www.cnblogs.com/sandraryan/

canvas是一个标签，可用于绘制复杂图形，渲染效果比普通DOM快

某些低版本浏览器不支持

canvas 使用原生几乎不借助框架

目前多用于：数据统计图，地图；小网页游戏、

canvas默认样式是300*150，背景白色，支持标签的所有样式，但一般不添加3D变换可能会影响原有内容

canvas 宽高可以通过属性直接设置

canvas 标签原生节点对象包含一个getContext函数，返回一个对象，

返回的对象中包含了一系列与绘图有关的属性和方法，要实现对应绘图效果，只需要从这个对象中调用对应函数

一个页面中可以出现多对canvas标签，使用不同的canvas节点对象的getContext值绘制的图形会渲染在对应的标签上

举个栗子

<!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 {

        box-shadow: 0 0 10px green;

    }

    </style>

</head>

<body>

    <canvas id="c1" width="500" height="300"></canvas>

    <canvas id="c2" width="500" height="300"></canvas>

    <script>

    // 获取元素

    var c1 = document.querySelector('#c1');

    var c2 = document.querySelector('#c2');

    // 通过getContext获取绘图功能

    var ctx1 = c1.getContext('2d');

    console.log(ctx1);

    ctx1.beginPath();//开始绘图

    ctx1.moveTo(0,0);//线的开始点

    ctx1.lineTo(500,300);//线的结束点

    ctx1.stroke();//绘制

    var ctx2 = c2.getContext('2d');

    console.log(ctx2);

    ctx2.beginPath();//开始绘图

    ctx2.moveTo(0,0);//线的开始点

    ctx2.lineTo(100,200);//线的结束点

    ctx2.stroke();//绘制

    </script>

绘制效果

canvas画线段

    <canvas id="cv" width="1000" height="600"></canvas>

    <script>

    var cv = document.querySelector('#cv');

    // 获取绘图对象

    var ctx = cv.getContext('2d');

    // 开启一条新路径，相当于画完一个图形，抬起画笔重新画下一个图形，否则就会连在一起

    // 线段要有开始点 结束点

    ctx.beginPath();

    ctx.strokeStyle = 'red';  // 设置绘制线条的颜色

    ctx.lineWidth = 20;// 设置绘制线条的粗细

    // 绘制的内容的样式要在绘制前设置

    ctx.moveTo(300,100);

    ctx.lineTo(400,600);

    ctx.stroke();

    </script>

绘制多个三角形

<body>

    <canvas id="cv" width="1000" height="600"></canvas>

    <script>

    var cv = document.querySelector('#cv');

    // 获取绘图对象

    var ctx = cv.getContext('2d');

    ctx.beginPath();

    ctx.strokeStyle = 'red';

    ctx.moveTo(100,100);

    ctx.lineTo(400,400);

    ctx.lineTo(100,600);//llineTo可以重复使用

    // ctx.lineTo(100,100);

    ctx.closePath();//闭合此次绘制中的开始点和结束点

    ctx.stroke();

    ctx.beginPath();

    ctx.strokeStyle = 'green';

    ctx.moveTo(300,200);

    ctx.lineTo(100,100);

    ctx.lineTo(200,300);

    ctx.closePath();

    ctx.stroke();

    // 可以在一个path重复使用moveTo lineTo，重复使用moveTo相当于重新开始path

    ctx.moveTo(500,300);

    ctx.lineTo(400,500);

    ctx.lineTo(100,500);

    ctx.closePath();

    ctx.stroke();

    </script>

</body>

绘制矩形

 <canvas id="cv" width="1000" height="600"></canvas>

        <script>

            var cv = document.querySelector('#cv');

            var ctx = cv.getContext('2d');

            //绘制矩形

            // 空心矩形

            ctx.strokeRect(100,100,200,300);

            // 实心矩形

            ctx.fillStyle = '#ff0';

            ctx.fillRect(400,100,300,200);

            // 绘制空心矩形，ctx.strokeRect(x,y,w,h);

            // 绘制实心矩形，ctx.fillRect(x,y,w,h);

            // x，y 是要绘制的矩形左上角再canvas上的坐标

            // w,h 是要绘制的矩形宽高

            // 要改变样式，stroke绘制用strokeStyle修改，fill绘制，fillStyle修改

        </script>

绘制圆形

 <canvas id="cv" width="1000" height="600"></canvas>

        <script>

            var cv = document.querySelector('#cv');

            var ctx = cv.getContext('2d');

            ctx.arc(500,300,200,0,Math.PI,true);

            ctx.stroke();

            ctx.arc(ox,oy,r,start,end,boolean);

            // ox oy要绘制的弧度对应的圆心位置

            // r弧度的半径

            // start end 弧度开始和结束的圆心角

            // boolean 顺时针绘制（默认false），true逆时针

        </script>

var cv = document.querySelector('#cv');

            var ctx = cv.getContext('2d');

            ctx.arc(500,300,200,0,Math.PI,true);

            ctx.fill();
　　　　　　　//实心圆

h5 的canvas绘制基本图形的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  3. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  4. canvas绘制简单图形

    canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...

  5. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. Android采用canvas绘制各种图形

    canvas通俗的说就是一个帆布,我们可以用刷子paint,就此随机抽签显卡. 原理: 能够canvas视Surface替代或接口.图形绘制Surface向上.Canvas封装了全部的绘制调用. 通过 ...

  7. canvas绘制旋转图形

    将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...

  8. Canvas绘制不规则图形，实现可拖动，编辑--V1.0第一篇

    目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看 ...

  9. h5的canvas绘制方格（边框随即色）

    文章地址 https://www.cnblogs.com/sandraryan/ 两个循环绘制 <body> <canvas id="cv" width=&quo ...

随机推荐

  1. linux源码安装

    以安装xxx.tar.gz为例: 源码存放位置:/usr/local/src/ 安装路径:/usr/local/xxx/ 配置文件存放位置:/usr/local/xxx/etc/ 可执行文件存放位置: ...

  2. H5C3--sessionStorage和localStorage的使用

    一.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. web前端学习（二）html学习笔记部分（5）--拖放元素、canvas画布使用

    1.2.11  拖放 1.2.11.1  html拖放 1.2.11.2  html拖放本次资源 showOjb(一个对象)展示一下一个对象的信息. 1.2.12  html画布(canvas)  标 ...

  4. Vue调试神器之Vue.js devTools

    Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...

  5. 并发模式与 RPS 模式之争，性能压测领域的星球大战

    本文是<如何做好性能压测>系列专题分享的第四期,该专题将从性能压测的设计.实现.执行.监控.问题定位和分析.应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能压测的理论 ...

  6. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  7. hadoop生态系统默认port集合

    版权声明:本文为博主John Lau原创文章.未经博主同意不得转载 https://blog.csdn.net/GreatElite/article/details/24651569      1 H ...

  8. jpa hibernate 打印sql，format日志，打印SQL参数，打印什么指令

    环境说明:IntelliJ IDEA 2017.3.4 版本:SpringBoot 2.0.0.RELEASE:hibernate用的是JPA自带. 打印SQL 到控制台: 首先,我使用的是appli ...

  9. oracle dbms_repcat_admin能带来什么安全隐患

    如果一个用户能执行dbms_repcat_admin包,将获得极大的系统权限. 以下情况可能获得该包的执行权限: 1.在sys下grant execute on dbms_repcat_admin t ...

  10. 详解composer的自动加载机制

    composer是一个用PHP开发的用来管理项目依赖的工具,当你在项目中声明了依赖关系后,composer可以自动帮你下载和安装这些依赖库,并实现自动加载代码. 安装composer composer ...