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. 在laravel中使用支付宝手机网站支付 和 支付宝退款

    1.在蚂蚁金服开放平台中申请对应的应用,并根据提示进行签约 2.给对应的应用信息 生成私钥和公钥(私钥会保存在本地,公钥会放在对应的应用信息中) 3.下载手机网站支付 对应的php sdk 4.将sd ...

  2. 详细的nginx.conf中文资料整理

    整理来源: https://blog.csdn.net/tjcyjd/article/details/50695922 整理结果 Nginx的配置文件nginx.conf配置详解如下: #Nginx用 ...

  3. FPGA与嵌入式一点见解

    FPGA:即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的一种半定制电路而出现的,既解决了定制电路的不足,又克服了原有可 ...

  4. 庖丁解牛-----Live555源码彻底解密(根据MediaServer讲解Rtsp的建立过程)

    live555MediaServer.cpp服务端源码讲解 int main(int argc, char** argv) { // Begin by setting up our usage env ...

  5. java动态画圈圈。运用多线程,绘图

    总结:只是意外的收获吧.之前一篇是老师教的,一个点,从底层开始升起,到鼠标按下的地方开始画圈圈, 现在改变了一下,因为点上升的一个循环和画圈的循环是分开的 现在让点点自己跑,并且边跑边画圈.而且在fo ...

  6. 第11章 Tomcat的系统架构与设计模式

    11.1 Tomcat总体设计 11.1.1 Tomcat总体架构 Tomcat和核心有连个组件:Connector和Container,Connector是可以被替换的.一个container可以有 ...

  7. 第九章 整合Mybatis(待续)

    ··········

  8. Angular4中利用promise异步加载gojs

    GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...

  9. 「小程序JAVA实战」运行微信官方demo(四)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-04/ 微信官方小程序的demo 介绍 https://mp.weixin.qq.com/cgi-b ...

  10. Ant 执行 exec cmd.exe 时路径包含空格的问题

    需求描述 通过Ant脚本调用bat脚本 问题描述 bat脚本所在目录名称包含空格(space),cmd.exe调用时候报错The system cannot find the path specifi ...