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. 【解惑】让人头疼的"相等"关系

    Java中判断相等关系一般有两种手段:(1) “==”关系操作符  (2) equals()方法. 显然,基本数据类型变量之间只能用"==".而对象之间两种手段都是合法的.但是有很 ...

  2. Data Flow ->> Multicast

    Multicast的中文意思是组播或者多播.那自然这个组件干的事情就是可以把一份数据库输入给多少接收组件作为输入.这里有篇别人的博文讲到了Multicast的主要作用和应用场景:http://www. ...

  3. USACO Section 2.1: Hamming Codes

    挺简单的一道题 /* ID: yingzho1 LANG: C++ TASK: hamming */ #include <iostream> #include <fstream> ...

  4. mysql 语句大全

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  5. cocos2dx Android 环境搭建 以及 ndk调试

    最近在学习cocos2dx,真的很强大,使我们更专注于游戏趣味,免去了繁琐的底层框架代码. cocos2dx的最强大之处当然在于跨平台.跨平台首选当然是Android,好记性不如烂笔头,记下本文分享给 ...

  6. Eclipse引用Library失败的问题

    整个导入流程严格按照guide的内容操作,但是始终无法导入,设置导入后项目中不出现相关的Library project.在设置完library之后重新打开始始终显示关联错误,就是reference那里 ...

  7. Android 用户界面---拖放（Drag and Drop）（一）

    用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...

  8. SPOJ ARCTAN (数论) Use of Function Arctan

    详细的题解见这里. 图片转自上面的博客 假设我们已经推导出来x在处取得最小值,并且注意到这个点是位于两个整点之间的,所以从这两个整数往左右两边枚举b就能找到b+c的最小值. 其实只用往一边枚举就够了, ...

  9. 戏（细）说Executor框架线程池任务执行全过程（上）

    一.前言 1.5后引入的Executor框架的最大优点是把任务的提交和执行解耦.要执行任务的人只需把Task描述清楚,然后提交即可.这个Task是怎么被执行的,被谁执行的,什么时候执行的,提交的人就不 ...

  10. 30条MySQL优化总结

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...