canvas H5新增的元素,提供了强大的图形的绘制,变换,图片,视频的处理等等。需要使用JavaScript脚本操作

浏览器支持

大多数的现代浏览器都可以支持;IE8以下的浏览器不支持

画布 可支持设置宽高,默认宽高300 150

获取canvas元素

var mycanvas = document.getElementById("myCanvas");

获取绘制环境(相当于画笔)

var context = mycanvas.getContext("2d");

是自带的好h5对象,拥有多种绘制路径,矩形,圆形,文本等方法

绘制线

开始绘制

context.beginPath();

设置起点的坐标

moveTo(x,y)

设置样式(颜色,渐变或模式)

context.strokeStyle = "yellow";

设置填充颜色

context.fillStyle = "blue";

context.fill();

设置线条宽度

context.lineWidth = 5;

设置线条结束端 lineGap

设置拐角类型   lineJoin

context.lineCap = "round";

绘制

context.stroke();

绘制矩形

fillRect()  绘制填充的矩形

strokeRect() 绘制无填充的矩形

阴影颜色 shadowColor

阴影的模糊级别 shadowBlur

阴影的水平偏移量 shadowOffsetX

阴影的垂直偏移量 shadowOffsetY

绘制文字

strokeText() 绘制空心文本

fillText()  绘制实心文本

线性渐变

createLinearGradient(x0,y0,x1,y1)

x0,y0,x1,y1起始位置的坐标和结束位置的坐标

var linear = context.createLinearGradient(100, 350, 400, 450);

addColorStop()

参数1:对应颜色的位置,[0,1]

参数2:对应的颜色(字符串形式)

linear.addColorStop(0, "red");

linear.addColorStop(0.5, "yellow");

linear.addColorStop(1, "blue");

context.fillStyle = linear;

context.fillRect(0, 350, 500, 25);

context.fillRect(0, 0, 500, 500);

径向渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1)

x0,y0,r0,x1,y1,r1径向渐变的起始位置和结束位置对应的坐标和渐变半径

var grad = context.createRadialGradient(150, 150, 50, 150, 150, 150);

grad.addColorStop(0, "red");

grad.addColorStop(0.5, "yellow");

grad.addColorStop(1, "blue");

context.fillStyle = grad;

context.fillRect(0, 0, 300, 300);

图形变换

平移 旋转 缩放

translate() 平移 重置画布

平移操作只会影响后面图形的位置,是不会影响前面图形的

context.fillStyle = grad;

context.fillRect(300, 300, 100, 100);

context.translate(50, 50);

rotate()旋转

context.rotate(Math.PI / 4);

scale(w,h) 设置x方向和y方向的缩放比。大于1:放大,小于1:缩小

context.scale();

贝塞尔曲线

二次方贝塞尔曲线

context.quadraticCurveTo(cx,cy,x1,y1);

参数:cx,cy  二次方贝塞尔曲线的控制点坐标位置

x1,y1  结束点坐标位置

context.beginPath();

context.moveTo(50, 50);

context.quadraticCurveTo(100, 100, 150, 20);

context.stroke();

三次方贝塞尔曲线

bezierCurveTo(cx1,cy1,cx2,cy2,x,y)

前四个参数:代表两个控制点的坐标位置

后两个参数:代表结束点的坐标位置

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

  1. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  2. 浅谈JavaScript的Canvas(绘制图形)

    HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. <canv ...

  3. 基于canvas线条绘制图形

    原理说明 绘制一个正方形,正放心每条边等比例均分,具体分配多少根据自身情况而定,按照最上边边顺时针方向依次绘制线条,相邻两条边上的点依次连接,知道所有的点全部连接完便绘制完成. 示例效果图图如下 具体 ...

  4. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  5. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  6. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  7. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  8. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

  9. canvas高效绘制10万图形,你必须知道的高效绘制技巧

    最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈.需求看起来不难,上手就可以做,写两个for循环. 原始绘制方法 首先定义了很多Circle对象,在遍历循环中调用该对象的draw方法.代码 ...

随机推荐

  1. plsql无法连接64位oracle数据库的解决方法

    今儿个重装了个系统,win8 64位.接着装了个64位的oracle11g,oracle11g下载页面:http://www.oracle.com/technetwork/database/enter ...

  2. python urllib和urllib3包

    urllib.request urllib当中使用最多的模块,涉及请求,响应,浏览器模拟,代理,cookie等功能. 1. 快速请求 urlopen返回对象提供一些基本方法: read 返回文本数据 ...

  3. linux下通过sysfs操作GPIO

    linux下通过sysfs操作GPIO 在嵌入式设备中对GPIO的操作是最基本的操作.一般的做法是写一个单独驱动程序,网上大多数的例子都是这样的.其实linux下面有一个通用的GPIO操作接口,那就是 ...

  4. 【转】Jmeter分布式部署文档

    很多时候,我们测试时,如果进行大数据量的并发测试时,单个电脑的CPU和内存可能无法承受,这个时候,我们需要进行一个分布式的测试,比如10000个并发,使用三台电脑来进行并发,Jmeter提供了这种功能 ...

  5. java实例三维空间求点之间的距离。。。。

    package com.b; public class Ponit { private double x; private double y; private double z; public Pon ...

  6. Py修行路 python基础 (十五)面向对象编程 继承 组合 接口和抽象类

    一.前提回忆: 1.类是用来描述某一类的事物,类的对象就是这一类事物中的一个个体.是事物就要有属性,属性分为 1:数据属性:就是变量 2:函数属性:就是函数,在面向对象里通常称为方法 注意:类和对象均 ...

  7. C Primer Plus学习笔记(十三)- 结构和其他数据形式

    建立结构声明 结构声明(structure declaration)描述了一个结构的组织布局 struct book { char title[MAXTITL]; char author[MAXAUT ...

  8. BMP格式详解

    BMP格式详解 BMP文件格式详解(BMP file format) BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关位图),是Win ...

  9. Cfree clion windows c语言 socket 网络编程

    server.c #include <stdio.h> #include <winsock2.h> #define SERVER_PORT 5208 //侦听端口 int ma ...

  10. 如何搭建自己的SPRING INITIALIZR server

    这两天在慕课学Spring boot ,用idea通过spring initializr新建项目 即使用代理连不上.无奈. 参考了 GitHub - spring-io/initializr: A w ...