文章地址：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. Vue-- vue-preview（图片查看器）的使用步骤：

    vue-preview的使用步骤: )下载 )配置:找到配置文件加入: { test: /vue-preview.src.*?js$/, loader: 'babel-loader' }, 在处理ur ...

  2. 由一道面试题引起的arguments的思考

    写一个按照下面方式调用都能正常工作的 sum 方法 console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5从这 ...

  3. 全球城市群Megalopolis

    Megalopolis From Wikipedia, the free encyclopedia   (Redirected from Megalopolis (city type))   &quo ...

  4. Python运用于数据分析的简单教程

    Python运用于数据分析的简单教程 这篇文章主要介绍了Python运用于数据分析的简单教程,主要介绍了如何运用Python来进行数据导入.变化.统计和假设检验等基本的数据分析,需要的朋友可以参考下 ...

  5. kubernetes1.5新特性跟踪

    Kubernetes发布历史回顾 Kubernetes 1.0 - 2015年7月发布 Kubernetes 1.1 - 2015年11月发布 Kubernetes 1.2 - 2016年3月发布 K ...

  6. @Transactional注解事务

    打了这个注解的类或者方法表示该类里面的所有方法或者这个方法的事务由spring处理,来保证事务的原子性,即方法里面对数据库操作,如果失败则spring负责回滚操作,成功提交操作 一.特性 1.serv ...

  7. 巨蟒python全栈开发-第11阶段 ansible3_3入门playbook剧本

    1.playbook剧本 2.playbook传参 3.setup模块介绍 4.playbook的tags 5.playbook的handlers&&templates模块 6.条件和 ...

  8. nodeJs学习-04 POST数据请求,分段发送，分段接收

    const http = require("http"); const querystring= require('querystring'); http.createServer ...

  9. C# 从零开始写 SharpDx 应用 画三角

    原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...

  10. 自定义View系列教程08--滑动冲突的产生及其处理

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...