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. JVM垃圾回收机制总结(3) ：按代垃圾收集器

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的 . 因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对 ...

  2. iOS：地图：MapKit和CoreLocation

    地图:MapKit和CoreLocation 简介: 现在很多的社交软件都引入了地图和定位功能,要想实现这2大功能,那就不得不学习其中的2个框架:MaKit和CoreLocation CoreLoca ...

  3. 怎么批量修改Word表格的宽度

    怎么批量修改Word表格的宽度 怎么批量修改Word表格的宽度呢.Word表格可根据窗口自动调整表格宽度,使得所有的表格宽度和页面宽度一样.当页面设置了新的页边距后,所有的表格都需要调整新的宽度.或者 ...

  4. OTP【转】

    转自:http://baike.baidu.com/link?url=58z3oZfEMvNRiDUmWrxtzfDhv--UZ1jaW4rBHg1d9kIWd6HQaYZ96DH8QAFopSZBK ...

  5. Oracle —— 函数 length() 和 lengthb() 的区别

    先看看几个例子: select length('Oracle') from dual 结果:6 select lengthb('Oracle') from dual 结果:6 select lengt ...

  6. Volley HTTP库系列教程(4)Volley内置的几种请求介绍及示例,StringRequest,ImageRequest,JsonObjectRequest

    Making a Standard Request Previous  Next   This lesson teaches you to Request a String 返回String Requ ...

  7. supersocket中的日志处理

    接口以及类之间的关系

  8. JSON 之 SuperObject(3): 访问

    测试数据提前加入 Memo1 中: 代码文件: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, ...

  9. JavaScript高级程序设计之数据类型

    首先讲讲关于js文件放置的问题,如果把<script>放在head标签处,浏览器会先加载完该处的所有不使用defer属性的js文件再呈现页面的内容(浏览器在遇到body标签时才呈现内容), ...

  10. IOS开发之不同版本适配问题2(#ifdef __IPHONE_7_0)(转载)

    继续说说ios不同版本之间的适配 先说一个东西:在xcode当中有一个东西叫targets,苹果的官方文档是这样说的: A target specifies a product to build an ...