文章地址：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. TypeScript类型检查机制

    类型推断 指不需要指定变量的类型,TS编译器可以根据某些规则自动推断出类型. 什么时候会有类型推断? 声明变量时没有指定类型 函数默认参数 函数返回值 ...... let a; // 这时自动推断为 ...

  2. Codeforces 293B Distinct Paths DFS+剪枝+状压

    目录 题面 题目链接 题意翻译 输入输出样例 输入样例#1 输出样例#1 输入样例#2 输出样例#2 输入样例#3 输出样例#3 输入样例#4 输出样例#4 说明 思路 AC代码 总结 题面 题目链接 ...

  3. linux类库之log4j-LogBack-slf4j-commons-logging

    log4j http://commons.apache.org/proper/commons-logging/ http://logging.apache.org/log4j/2.x/ The Com ...

  4. solr dataimport中遇到的问题

    1.windows的tomcat是没有catalina.out的,可以通过修改start.bat和catalina.bat的方式让日志输出到catalina.out 2.按照网上搜到的资料配置好sol ...

  5. 遗传算法MATLAB实现(3):多元函数优化举例

    多峰的Shubert为: 求f(x,y)在[-10,10]x[-10,10]上的最大值. MATLAB代码: fun_mutv函数为: function my=fun_mutv(x,y) t1=zer ...

  6. oracle-Immediate

    从shutdown immediate命令发布起,禁止建立任何新的oracle连接 未提交的事务被回退.因此,处于一个事务中间的用户将失去所有未提交的劳动成果. oracle不等待客户断开连接.任何未 ...

  7. Linux进程管理（二、 进程创建）

    通常使用fork创建进程, 也可以用vfork()和clone().fork.vfork和clone三个用户态函数均由libc库提供,它们分别会调用Linux内核提供的同名系统调用fork,vfork ...

  8. IIS 设置 FTP 服务器 添加多个账户

    我们有很多童鞋经常开不动IIS自带的FTP如何创建,就算创建了也不会实现多用户,下面我来分享一下我的经验吧: 使用 IIS 设置 FTP 服务器 依次单击“开始”按钮.“控制面板”和“添加或删除程序” ...

  9. 微信开发之web开发者工具

    web开发者工具. 有任何疑问或建议请私信我,或者在评论区大家一起探讨. 概述 为帮助开发者更方便.更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具.它是一个桌面应用,通过模拟微信客户 ...

  10. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第八章：光照

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第八章:光照 代码工程地址: https://github.com/j ...