Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。

如有疑问请访问链接：http://javascript.ruanyifeng.com/htmlapi/canvas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>概述以及绘图方法</title>
</head>
<body>

<!-- Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，
 --        基本上它是一个可以用JavaScript操作的位图（bitmap）
 -->
<canvas id="myCanvas" width="800" height="450">
    您的浏览器不支持canvas!
</canvas>

<script>
/**
 *每个canvas元素都有一个对应的context对象（上下文对象），
 *Canvas API定义在这个context对象上面，
 *所以需要获取这个对象，方法是使用getContext方法。
 */
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}

/**
 * canvas画布提供了一个用来作图的平面空间，
 * 该空间的每个点都有自己的坐标，x表示横坐标，y表示竖坐标。
 * 原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。
 */
ctx.beginPath();             // 开始路径绘制
ctx.moveTo(20, 20);         // 设置路径起点
ctx.lineTo(200, 50);        // 绘制一条到200, 20的直线
ctx.lineWidth = 1.5;        // 设置线宽
ctx.strokeStyle = "red";     // 设置线的颜色
ctx.stroke();                 // 进行线的着色，这时整条线才变得可见

/**
 * fillRect(x, y, width, height)方法用来绘制矩形，
 * 它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。
 */
ctx.fillStyle = 'yellow';            //设置矩形的填充色
ctx.fillRect(50, 50, 200, 100);
ctx.strokeRect(100, 100, 200, 100);    //绘制空心矩形
ctx.clearRect(120,80,50,50);        //清除某个矩形区域的内容

/**
 * fillText(string, x, y) 用来绘制文本，
 * 它的三个参数分别为文本内容、起点的x坐标、y坐标
 */
//设置字体
ctx.font = "Bold 20px Arial";
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600";
// 设置字体内容，以及在画布上的位置
ctx.fillText("Hello!", 500, 200);
// 绘制空心字
ctx.strokeText("Hello!", 450, 150); 

/**
 * arc方法用来绘制扇形。
 * ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
 * arc方法的x和y参数是圆心坐标，radius是半径，
 * startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），
 * anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。
 */
ctx.beginPath();
ctx.arc(650, 150, 50, 0, Math.PI*2, true);
ctx.fillStyle = "black";
ctx.fill();
//空心圆形
ctx.beginPath();
ctx.arc(260, 160, 100, 0, Math.PI*2, true);
ctx.lineWidth = 12.0;
ctx.strokeStyle = "blue";
ctx.stroke();

/**
 * createLinearGradient方法用来设置渐变色
 * createLinearGradient方法的参数是(x1, y1, x2, y2)，
 * 其中x1和y1是起点坐标，x2和y2是终点坐标。
 * 通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。
 */
var myGradient = ctx.createLinearGradient(200, 300, 400, 400);
myGradient.addColorStop(0, "pink");
myGradient.addColorStop(1, "green");
ctx.fillStyle = myGradient;
ctx.fillRect(100,300,200,100);

/**
 * 一系列与阴影相关的方法，可以用来设置阴影。
 */
ctx.shadowOffsetX = 10;                    // 设置水平位移
ctx.shadowOffsetY = 10;                    // 设置垂直位移
ctx.shadowBlur = 5;                        // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)";     //设置阴影颜色
ctx.fillStyle = "#CC0000";
ctx.fillRect(400,300,200,100);

</script>

</body>
</html>

运行结果如下：

html --- canvas --- javascript --- 绘图方法的更多相关文章

  1. Canvas 基本绘图方法总结

    一.基本内容  1.简单来说,HTML5提供的新元素<canvas>  2.Canvas在HTML页面提供画布的功能,在画布中绘制各种图形  3.Canvas绘制的图形与HTML页面无关, ...

  2. Canvas绘图方法和图像处理方法（转）

    转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它 ...

  3. javascript canvas 生成图片的方法

    javascript canvas 生成图片的方法 先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可<pre><!DOCTYPE HTML><ht ...

  4. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  5. 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏（包含源码）

    这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...

  6. canvas主要属性和方法

    canvas主要属性和方法 方法                                   描述 save()                           保存当前环境的状态 res ...

  7. 高性能动画！HTML5 Canvas JavaScript框架KineticJS

    高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...

  8. [原创] 改善 Firemonkey Canvas 几何绘图质量问题（移动平台）

    说明: Fiiremonkey 的跨平台能力,大家有目共睹(一码同介面跨四平台),唯独移动平台在几何绘图方面,质量始终不尽人意,我也曾试着去修正(如:修正曲线平滑问题),也曾找过第三方案(如:AggP ...

  9. JavaScript - reduce方法,reduceRight方法 (Array)

    JavaScript - reduce方法 (Array) 解释:reduce() 方法接收一个函数作为累加器(accumulator),数组 中的每个值(从左到右)开始合并,最终为一个值. 语法:a ...

随机推荐

  1. C# 中间语言、CLR、CTS、CLS

    c#  中间语言.CLR.CTS.CLS IL中间语言,区分大小写 中间语言的主要特征: 1.  面向 对象和使 用接口 2. 值类型和引 用类 型之间的 显 著差异 3.  强 数据类型化 4. 使 ...

  2. 30 个 PHP 的 Excel 处理类

    下面的 PHP Excel 处理类中,包含 Excel 读写.导入导出等相关的类,列表如下: PHP Excel Reader classes 1. Read Excel Spreadsheets u ...

  3. (六)C#中判断空字符串的三种方法性能分析

    三种方法分别是: string a=""; 1.if(a=="") 2.if(a==string.Empty) 3.if(a.Length==0) 三种方法是等 ...

  4. asp开发微信扫码支付

    这个任务已经给了.现在正在学习开发中.主要注意的是2点. 1:返回参数的验证. 2:通知后业务处理和处理后返回财付通.大部分操作,api中已经处理好. 现在需要的业务逻辑部分. 需要正确3个参数  r ...

  5. BZOJ 2351 Matrix（哈希）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2351 题意:给出一个n*m的01矩阵.再给出10个A*B的小01矩阵.判断这些小的矩阵是 ...

  6. python实现简单kNN

    注释写得很清楚了,熟悉了一下python的一些基本语法和numpy中的一些操作. from numpy import * import operator def createDataSet(): # ...

  7. h-index

    https://leetcode.com/problems/h-index/ https://leetcode.com/mockinterview/session/result/xjcpjlh/ 看了 ...

  8. Qt之HTTPS登录

    简述 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP ...

  9. 基于EasyUi的快速开发框架

    先看图,下边这个简单的增.删.改.查,如果自己写代码实现,这两个页需要多少行代码? 如果再有类似的增.删.改.查,又需要多少行代码? 我最近搞的这个快速开发框架中,代码行数不超过100. 两页的代码如 ...

  10. POJ 1976 A Mini Locomotive【DP】

    题意:给出一列火车,可以由三个火车头拉,每个火车头最多拉m节车厢(这m节车厢需要保持连续),再给出n节车厢,每节车厢的人数,问最多能够载多少人到终点. 可以转化为三个长度相等的区间去覆盖n个数,使得这 ...