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. tomcat manager app 和 host maganger

    当你以为你了解某个东西时,其实你不了解它.比如tomcat也可以像jboss一样有用户名和密码 就在apache-tomcat-8.0.21\conf\tomcat-users.xml里配置用户名和密 ...

  2. C++调用python

    本文以实例code讲解 C++ 调用 python 的方法. 本文在util.h中实现三个函数: 1. init_log: 用google log(glog)初始化log 2. exe_command ...

  3. android ImageView的属性android:scaleType，即ImageView.setScaleType(ImageView.ScaleType)

    实例 <ImageView android:id="@+id/image" android:layout_width="fill_parent" andr ...

  4. Eclipse —— 如何修改文件的默认编辑器

    Eclipse下的各类文件各自都有默认的编辑器,但不一定好用.如何指定各种文件的默认编辑器呢? 假如,Properties文件,我不想用Eclipse自带的编辑器,而是使用 Properties Ed ...

  5. Commons-Collections

    package com.bjsxt.others.commons; import java.util.ArrayList; import java.util.List; import org.apac ...

  6. sqlserver资源下载

    安装包可以从itellyou下载 NorthWind 安装SQL2000SampleDb.msi 之后可以在C:\SQL Server 2000 Sample Databases目录 2016/01/ ...

  7. mysql 字符串函数

    对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的 最左面字符的ASCII代码值.如果str是空字符串, 返回0.如果str是NULL,返回NULL. mysq ...

  8. php安装了扩展提示undefined

    安装curl扩展后仍然提示如下错误: Call to undefined function curl_init() 使用一下语句 输出NO echo function_exists('curl_ini ...

  9. UESTC 1074 秋实大哥搞算数 栈模拟

    秋实大哥搞算数 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit S ...

  10. 【转载】Redis的一些使用场景

    看了一些文章,关于Redis的使用场景,觉得挺好的.Redis肯定远远不止作为缓存而使用.Redis更像是一个实现很好的数据结构服务器,通过TCP栈协议提供服务.下面进行详细描述. http://da ...