文章地址：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. Hdu 1045　二分匹配

    题目链接 Fire Net Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. WPF DrawingVisual详解

    在WPF中,如果需要绘制大量图形元素,并且对性能要求严苛的话,最好使用DrawingVisual,当然,你也可以选用 Path类和比Path类更轻量级的Geometry(几何形状)来实现你的需求,但是 ...

  3. 如何成功安装旧版本火狐，成功安装firebug

    1.下载一个老版本火狐浏览器: 历史版本下载 2.下载安装完成后,立即在火狐浏览器的选项设置里面把自动更新关闭 3.手动安装firebug:最后搜到可以下载成功的地址:http://www.onlin ...

  4. IntelliJ IDEA添加过滤文件或目录(转)

    在idea上使用svn后,发现即使svn窗口添加过滤正则没有忽略.iml文件的提交,安装ignore插件后没发现有svn的忽略选项,最后发现这样设置就可以了: 1.Settings→Editor→Fi ...

  5. redis是当前流行的nosql数据库

    redis是当前流行的nosql数据库,很多网站都用它来做缓存,今天我们来安装并配置下redis 二.安装并配置redis 1.安装redis sudo apt-get install redis-s ...

  6. PHP学习（字符串操作）

    在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ".单引号和双引号到底有啥区别呢?  PHP允许我们在双引号串中直接包含字串变量.而单引号串中的内容总被认 ...

  7. Mac下搭建python开发环境

    目录 1. 安装brew 2. 安装 mysql 3. 安装 pycharm 4. 安装python3.6 5. 安装virtualenvwrapper 6. 虚拟环境下安装mysqlclient 1 ...

  8. Silverlight 2.5D RPG游戏技巧与特效处理：（五）HLSL渲染动画

    原文:Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画 或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新,追问下去HLSL到底是何方神圣能实现如此炫酷之效果?层 ...

  9. 比较全面的一个PHP缓存类解析

    转自:http://www.blhere.com/1164.html 一.引论 PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站 ...

  10. celery 动态定时任务探索

    环境: celery 4.3 flask python 3.7 linux 需求: 动态添加定时任务,且方便维护. 解决思路: 参考django-celery 或是celery源码,将定时任务配置放置 ...