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. layui导航的使用

    在项目开发的时候,需要后台的系统好看点,左边的导航需要设计为多级的,而且要点击当前的链接页面,刷新后要实现选中状态 学习源头:http://www.layui.com/doc/element/nav. ...

  2. FPGA前世今生(二)

    上期我们介绍了关于FPGA内部最基本的结构,在quartus下可以看到整体的结构. 这是在平面规划图下看到的结构,其中蓝色的小格代表一个LAB.四周边上浅棕色的小格代表IO口. 这是一个LAB的内部结 ...

  3. (转)Oracle 包(Package)

    本文转载自:http://www.cnblogs.com/lovemoon714/archive/2012/02/29/2373695.html 1.为什么要使用包?       答:在一个大型项目中 ...

  4. IDA Pro 权威指南学习笔记(五) - IDA 主要的数据显示窗口

    在默认配置下,IDA(从 6.1 版开始)会在对新二进制文件的初始加载和分析阶段创建 7 个显示窗口 3 个立即可见的窗口分别为 IDA-View 窗口.函数窗口和消息输出窗口 可以通过 View - ...

  5. 2014.9.30 Double转字符

    (57.0/60.0).ToString("f2")="0.95" 等于 string.Format("{0:F2}",57.0/60)=& ...

  6. table 1PX 边框

    .role_mod_tab{border:1px solid #E8E8E8; width:100%; color:#181818; font-size:14px; cellspacing:0; ce ...

  7. EasyUI应用总结

    1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncod ...

  8. 关于项目报错Dynamic Web Module 3.0 requires Java 1.6 or newer 的解决方法

    起因:今天使用maven创建web项目的时候发现项目上老是有个红X,错误如下图所示,虽然项目能正常运行起来,但是LZ的强迫症发作,不弄掉就觉得心里不舒服,于是上网查了攻略,几经周折最终大功告成,现在就 ...

  9. Clean小程序(控件消息)

    一 . 准备工作 创建一个基于对话框的MFC项目 删除对话框上的工具 二 . 实现将seven图片贴到上面,按一下则换一张图片 1.在资源视图中添加位图资源,通过属性修改图片ID 2.将对话框拉长,防 ...

  10. Spring总结三:DI(依赖注入)

    简介: 所谓的依赖注入,其实是当一个bean实例引用到了另外一个bean实例时spring容器帮助我们创建依赖bean实例并注入(传递)到另一个bean中,比如你使用Spring容器创建的对象A里面需 ...