文章地址：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. 通过sql 向数据库插入多行语句

    我们知道通过insert into 表名(列名) values(值)是向表中插入一条语句,可是当我们需要向数据库插入多条语句时,应该怎么做呢? 可以通过如下格式的sql 语句来实现一次向数据库插入多行 ...

  2. C位域的初步了解

    以为C中的东西了解的差不多了...今天却是第一次才看到位域这个概念, 闲来无事的时候读起了编程之美,看一个问题的时候有种解答用到了位域, 位域的结构体定义,变量声明和结构体很相似: struct (结 ...

  3. React高阶组件 和 Render Props

    高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...

  4. DOM修改元素的方法总结

    今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...

  5. 10分钟学会Python

    #1. 语法 Python中没有强制的语句终止字符,代码块是通过缩进来指示的.缩进表示一个代码块的开始,逆缩进则表示一个代码块的结束.一般用4个空格来表示缩进. 声明以冒号(:)字符结束,并且开启一个 ...

  6. 【JZOJ3873】【NOIP2014八校联考第4场第2试10.20】乐曲创作(music)

    ujfuiaty 小可可是音乐学院的一名学生,他需要经常创作乐曲完成老师布置的作业. 可是,小可可是一个懒惰的学生.所以,每次完成作业时,他不会重新创作一首新的乐曲,而是去修改上一次创作过的乐曲作为作 ...

  7. poj2195&&hdu1533 最小费用流

    这题也可以用km做,我写的代码km比费用流快很多. 最小费用流: #include<stdio.h> #include<string.h> #include<math.h ...

  8. MySQL主备模式的数据一致性解决方案

     根据阿里交易型业务的特点,以及在双十一这样业内罕有的需求推动下,我们在官方的MySQL基础上增加了非常多实用的功能.性能补丁.而在使用MySQL的过程中,数据一致性是绕不开的话题之一.本文主要从阿里 ...

  9. Android 神兵利器之通过解析网页获取到的API数据合集，可拿来就用

    AppApis 前段时间,写了个做app的实战系列教程,其中一篇章提到了解析网页中的数据为己所用,看到大家的响应还不错,于是把自己以前解析过的网页数据都整理了下,开放出来,给更多的人使用,希望可以帮助 ...

  10. hdu2018 dp

    /* 1~4直接取得: 然后后面的生牛的时候都是前一年的加上一定的数. 从第5年看,第五年出生的牛肯定要加上第四年出生的,然后由于第一个出生的牛开始生小牛,这和 最开始的牛生孩子是一样的,所以+dp[ ...