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. 安装S_S相关报错的troubleshooting

    在安装S_S server时,在Debian上会出现类似如下的报错: File , in <module> sys.exit(main()) File , in main config = ...

  2. 用 Python 实现文件查找

    用 Python 实现文件查找(BIF实现及队列实现) (1)利用内置函数实现文件查找 1.功能:返回用户输入的文件的绝对路径 2.设计思路: (1)用户输入在哪个盘进行查找 (2)遍历此盘文件,若为 ...

  3. FPGA论剑(续)

    25年之后,第二次华山论剑之时,天下第一的王重阳已然仙逝,郭靖少年英杰刚过二十岁,接东邪黄药师.北丐洪七公300招不败,二人默认郭靖天下第一.南帝段智兴因为出家,法号“一灯”,早已看破名利,故没有参加 ...

  4. Jenkins详细安装教程

    1.先下载msi文件 Jenkins下载链接: https://pan.baidu.com/s/1SACKNgW7OZrJoXMRDhsJxQ 提取码: 94b9 2.安装 解压后得到的是jenkin ...

  5. android滚条简单说明

    先看一下我自己写的布局,电脑屏幕太小,只截取到了一个radiobutton. 先画一个horizontalScrollView,因为我要做水平滚动,然后我需要水平布局,就添加了一个LinearLayo ...

  6. Apache+PHP多端口多站点

    # # Listen: Allows you to bind Apache to specific IP addresses and/or # ports, instead of the defaul ...

  7. List和Map常用的几种遍历方式

    遍历一个List有以下几种方法: /*//1.普通for循环的方式: List<String> list=new ArrayList<String>(); list.add(& ...

  8. mongodb基本操作和在springboot中的使用

    本文介绍mongodb的使用 说明 起步 mongo通用类型 mongoshell的操作 CRUD操作 shell命令操作 索引操作 mongo在springboot中的使用 目录结构 依赖 prop ...

  9. C# IP地址去掉端口号

    string Ip1 = "192.168.0.199:7777"; string Ip2 = Ip1.Remove(Ip1.IndexOf(':'));

  10. 请求时控制器的返回结果view()怎么会默认调到某个页面的?

    请求时控制器的返回结果view()怎么会默认调到某个页面的? (1)请求时会拿方法行为的名字去和视图的名字对应,会默认去views视图下的与控制器名称一样的文件夹下名字与方法对应的视图文件匹配对应,然 ...