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. 实用Linux命令，不求最全但求实用-------磁盘使用情况du,df

    命令: df -h 输出实例: 文件系统             容量    已用  可用  已用% 挂载点 /dev/md0              9.7G  4.7G  4.6G  51% / ...

  2. openstack配置注意事项（主要是网络相关）

    vlan协议应该配置为802.1q,另一个容易混淆的为ISL,配置命令为 switchport trunk encapsulation dot1q /islswitchport mode trunk ...

  3. USACO Section 4.2: The Perfect Stall

    这题关键就在将题转换成最大流模板题.首先有一个原始点,N个cow个点, M个barn点和一个终点,原始点到cow点和barn点到终点的流都为1,而cow对应的barn就是cow点到对应barn点的流, ...

  4. Socket 通信原理(Android客户端和服务器以TCP&&UDP方式互通)

    转载地址:http://blog.csdn.net/mad1989/article/details/9147661 ZERO.前言 有关通信原理内容是在网上或百科整理得到,代码部分为本人所写,如果不当 ...

  5. 如何通过session控制单点登录

    web服务器为每一个浏览器实例对应一个session.这个session有自己的一个独立id,这个id保存在浏览器的cookie中(这个cookie貌似随着这个浏览器实例的关闭而清除),访问web服务 ...

  6. JavaScript —— 对象的取值与赋值

    可能是因为用惯了 Java ,对一个对象取值/赋值喜欢用 setXXX() 和 getXXX() . 在 JavaScript 中使用 setValue() 时,遇到了个奇怪的问题,所以查了下 Jav ...

  7. 如何修改linux时间？ 校正linux系统的时间

    第一步:通过xshell远程连接到linux系统 第二步:输入 tzselect 第三步:选择所在的州,中国人请选择 5 ,亚洲 第四步:选择你所在的国家,中国人请选择9,中国 第五步:选择一个时区, ...

  8. 启用ntp服务

    1. 主服务器 修改配置vi /etc/ntp.conf restrict 192.168.2.0 mask 255.255.255.0 nomodify notrap #允许别的服务器同步 serv ...

  9. Gradle学习系列（一）

    今天就开始学习Gradle构建了,听说很牛X.本篇内容就带领我初步窥探Gradle的世界.     1.什么是Gradle       相信之前都接触过用Ant或者Meavn进行项目的构建,两者各有千 ...

  10. Android uiautomator gradle build system

    This will guide you through the steps to write your first uiautomator test using gradle as it build ...