1.我们前端的绘图技术有哪些:

统计图表:echarts

实时走势图:canvas;

在线画板:魔猴;

HTML5游戏:three.js

2.我这里主要讲的是canvas绘图;

<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。

在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

3.接下来我们来了解怎么用画布:

首先我们要创建一个画布;<canvas></canvas>,画布是可以设置宽高的,但是我们要记住一点,我们设置宽高要写行内样式,不能写=外部样式,因为在外部样式中我们的单位是px,如果我们把画布的宽和高设置大一点,就会失真,画布就会被拉扯大,我们就会看到1px的小方格网;

4.我们首先要获取画布,这是跟我们获取元素是一样的,然后就是canvas.getContext("2d");获取画布对象上下文,即相当于获取画笔;

画矩形:

画布的原点是我们的左上角(0 ,0)

ele.fillRect(x轴,y轴,宽度,高度)实心矩形     ele.fillStyle= "颜色”;

我们矩形的坐标也是我们的左上角

ele.strokeRect(x轴,y轴,宽度,高度);空心矩形   ele.strokeStyle = “颜色”;

我们的颜色要放到我们在绘制图形的前面写

canvas的路径:

ele.beginPath();这就相当于告诉我们,绘制要开始了;

我们的路径就相当于点线面的过程

我们的坐标点也是从(0,0)开始的;

起始点:moveTo(0,0);

转折点:lineTo();这个是终点,也是转折点;这个可以写多个;

ele.stroke();

ele.closePath()结束

这样路径就绘制好了;

画圆:

ele.beginPath();

ele.arc(x,y,半径,开始的弧度,结束的弧度,顺时针)false/true逆时针;

ele.stroke();空心圆;

ele.fill();实心圆

绘制文字:

font - 定义字体

fillText(文字,x,y) - 在 canvas 上绘制实心的文本

strokeText(文字,x,y) - 在 canvas 上绘制空心的文本

shadowBlur="5"设置阴影模糊度;

shadowColor = “颜色”

shadowoffsetX = 偏移x的距离;

shadowoffsetY= 偏移y的距离;

线性渐变:
// 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0);开始坐标到结束坐标

grd.addColorStop(0,"red");//偏移量和颜色

grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

扇形渐变

createRadialGradient(75,50,5,90,60,100)开始坐标和半径,结束坐标和半径

图像:

获取图片:

var ele = new Image();//创建图片容器

ele.src = “图片路径”;

图片直接在画布是显示不出来的;

为了使图片加载出来我们要使用ele.onload = function(){

canvas.drawImage(ele,x,y,w,h)//图片,坐标,宽高

}

ele.createpattern(图片,“repeat”)平铺

canvas的介绍的更多相关文章

  1. canvas 基本介绍

    # canvas 基本功能介绍 - canvas 能做什么 1. 绘制简单图形线条 2. 裁剪图片 - 开始绘制画布 新建html文档添加 canvas标签 ```html <div style ...

  2. Android Canvas类介绍

    当我们调整好画笔之后,现在需要绘制到画布上,这就得用Canvas类了.在Android中既然把Canvas当做画布,那么就可以在画布上绘制我们想要的任何东西.除了在画布上绘制之外,还需要设置一些关于画 ...

  3. HTML5中canvas介绍

    1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...

  4. Html5 学习系列(五)Canvas绘图API快速入门(2)

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  5. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  6. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  7. canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]

    标题canvas 从初级到XX,XX是因为本文随机都可能会太监,并不会支持到入土.请慎重的往下看. 对于canvas的介绍,随处都可以找到,也就不啰嗦太多了.就直奔主题了. 先看一段代码,以及实现的效 ...

  8. 2小程序canvas使用,及一些坑,以及自己的一些小总结

    自己做了一个小程序,主要用于给头像加图标的那种,和qq似的,主要用canvas做的, 第一回用,掉了很多坑,所以今天总结一下自己所做的,如果大家有不理解的地方,欢迎提问:如果帮到大家的话,帮忙点个啥的 ...

  9. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

随机推荐

  1. 移动端touch滑动事件监听

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 硬核! 逛了4年Github ,一口气把我收藏的 Java 开源项目分享给你!

    Awsome Java Great Java project on Github(Github 上非常棒的 Java 开源项目). English Version 大家都知道 Github 是一个程序 ...

  3. ASCII, Unicode, UTF-8

    (本文参考:http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html) 1. ASCII码 我们知道,在计算机内部,所有的 ...

  4. luogu P2417 课程

    题目描述 n个学生去p个课堂,每一个学生都有自己的课堂,并且每个学生只能去一个课堂,题目要求能够安排每一个课堂都有人吗? 输入格式 第一行是测试数据的个数, 每组测试数据的开始分别是p和n, 接着p行 ...

  5. Unity3D for iOS初级教程:Part 1/3(下)

    转自:http://www.cnblogs.com/alongu3d/archive/2013/06/01/3111735.html 一个手指来统治他们 但是等等,你还没有完全完成! 如果你玩游戏有一 ...

  6. python笔记01

    一.编码: (一)编码分类 ①ascii编码: 占有1个字节,8位,可表示2**8个字符,(py2默认编码方式). ②unicode: 万国码,占有4个字节,32位,可表示2**32个字符. ③utf ...

  7. CF600E Lomsat gelral (启发式合并)

    You are given a rooted tree with root in vertex 1. Each vertex is coloured in some colour. Let's cal ...

  8. HDU1529-Casher Emploryment(最最...最经典的差分约束 差分约束-最长路+将环变线)

    A supermarket in Tehran is open 24 hours a day every day and needs a number of cashiers to fit its n ...

  9. 将object转换成dyamic类型 解决long输出到浏览器过长精度丢失问题

    需求: 数据库使用飘雪算法保存唯一标识  是一个18位长整形 将数据输出到浏览器时出现了精度丢失问题,这是一个重大的BUG.如果没解决好整个项目都要改一遍. 讨论有三个办法 1.把所有实体 数据模型的 ...

  10. 【JS】394- 简明 JavaScript 函数式编程-入门篇

    转载自公众号"程序员成长指北" 写在开头 本文较长,总共分为三大部分:(对于函数式编程以及其优点有一定理解的童鞋,可以直接从 第二部分 开始阅读) 第一部分:首先会通过实际代码介绍 ...