HTML5之Canvas画布

先上代码:

<canvas width="1000" height="800">浏览器不支持HTML5!</canvas>
  <script type="text/javascript">
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext(‘2d‘);

        // 设置阴影
        context.shadowOffsetX = 5.0;
        context.shadowOffsetY = 5.0;
        context.shadowColor = "rgba(50%,50%,50%,0.75)";
        context.shadowBlur = 10.0;

        // 画一个矩形图形
        context.fillStyle = ‘red‘;
        context.fillRect(2, 2, 300, 200);

        // 加边框
        context.strokeRect(0, 0, 304, 204);

        // 画一个矩形
        context.fillStyle = ‘rgba(255,255,0,0.5)‘;
        context.fillRect(250, 150, 300, 200);

        // 清除指定区域
        context.clearRect(350, 200, 100, 100);
    </script>

- Rectangles 绘制矩形对象

- context.fillRect(x,y,w,h) // 绘制矩形
- context.strokeRect(x,y,w,h) // 绘制边框
- context.clearRect(x,y,w,h) // 清除指定区域

- Colors 设置颜色

- 指定颜色(红色)

指定方法 颜色值
-----------------------------
Hexa(十六进制) #FF0000
Hexa(short) #F00
RGB rgb(255,0,0)
RGB(percent) rgb(100%,0%,0%)
RGBA rgb(255,0,0,0.7)
RGBA(percent) rgba(100%,0%,0%,0.7)
HSL hsl(0,100%,50%)
HSLA hsla(0,100%,50%,1.0)
SVG(颜色名字) red

- shadow 阴影

  context.shadowOffsetX = 5.0;
  context.shadowOffsetY = 5.0;
  context.shadowColor = "rgba(50%,50%,50%,0.75)";
  context.shadowBlur = 10.0;

- Gradients 渐变

- 1.线性渐变

 // 起始位置截至位置
  var linGrad = context.createLinearGradient(0,450,1000,450);

  // 渐变中节点
  linGrad.addColorStop(0.0,‘red‘);
  linGrad.addColorStop(0.5,‘yellow‘);
  linGrad.addColorStop(0.7,‘orange‘);
  linGrad.addColorStop(1.0,‘purple‘);

  // 应用到图形上
  context.fillStyle = linGrad;
  context.fillRect(0,450,1000,450);

- 2. 中心区域渐变

  // 6组数字,代表 2 个圆
  var radGrad = context.createRadialGradient(260,320,40,200,400,200);

  radGrad.addColorStop(0.0, ‘yellow‘);
  radGrad.addColorStop(0.9, ‘orange‘);
  radGrad.addColorStop(1.0, ‘rgba(0,0,0,0)‘);

  context.fillStyle = radGrad;
  context.fillRect(0, 200, 400, 400);

- Paths 绘制路径线条

- 绘制过程
1.开始绘制 beginPath()
2.定义所有节点
3.用stroke实现绘制

CreateLineA();          // 绘制一个 A 型
CreateQua();            // 绘制一条 抛物线
CreateBez();            // 绘制一条 贝塞尔曲线
CreateArc();            // 绘制一个 自定义曲线
CreateRoundedRect();    // 绘制一个 圆角图形
CreateRect();           // 绘制一个 矩形

// 绘制一个 A 型
function CreateLineA() {
    context.fillStyle = ‘red‘;
    context.strokeRect(0, 0, 300, 300); // 绘制边框
    // 1. 开始绘制beginPath()
    context.beginPath();

    // 2. 定义所有节点
    context.moveTo(100, 200);   // 将笔移动到该坐标
    context.lineTo(150, 50);     // 绘制到指定坐标
    context.lineTo(200, 200);   // 再接着绘制到另一个坐标

    context.moveTo(100, 120);   // 再将笔移动到别的区域
    context.lineTo(200, 120);   // 再绘制一条线

    context.textAlign = ‘left‘;                 // 设置水平对齐
    context.textBaseline = ‘alphabetic‘;        // 设置垂直对齐
    context.font = ‘bold 16px sans-serif‘;      // 设置输出字体样式
    context.fillText(‘(100/200)‘, 50, 220);     // 在指定坐标输出文字
    context.fillText(‘(150/50)‘, 115, 30);
    context.fillText(‘(200/200)‘, 150, 220);
    context.fillText(‘(100/120)‘, 40, 100);
    context.fillText(‘(200/120)‘, 180, 100);

    // 3. 用stroke实现绘制
    context.stroke();
}

// 绘制一条抛物线
function CreateQua() {
    context.strokeRect(320, 0, 300, 300); // 绘制边框

    context.beginPath();
    context.moveTo(350, 250);
    context.quadraticCurveTo(400, 50, 600, 50);
    context.stroke();
}

// 绘制一条贝塞尔曲线
function CreateBez() {
    context.strokeRect(640, 0, 300, 300); // 绘制边框

    context.beginPath();
    context.moveTo(670, 250);
    context.bezierCurveTo(880, 300, 700, 30, 900, 50);
    context.stroke();
}

// 绘制一个 自定义曲线
function CreateArc() {
    context.strokeRect(0, 320, 300, 300); // 绘制边框
    context.beginPath();
    context.moveTo(20, 430);
    context.arcTo(20, 370, 270, 370, 60);
    context.stroke();
}

//  绘制一个 圆角图形
function CreateRoundedRect() {
    context.strokeRect(320, 320, 300, 300); // 绘制边框

    x = 340;
    y = 370;
    w = 250;
    h = 200;
    r = 60;

    context.beginPath();
    context.moveTo(x, y + r);
    context.arcTo(x, y, x + w, y, r);
    context.arcTo(x + w, y, x + w, y + h, r);
    context.arcTo(x + w, y + h, x, y + h, r);
    context.arcTo(x, y + h, x, y, r);
    context.closePath();    // 闭合曲线
    context.stroke();
}

// 绘制一个矩形对象
function CreateRect() {
    context.strokeRect(640, 320, 300, 300); // 绘制边框

    context.beginPath();
    context.rect(660,340,250,250);
    context.stroke();
}
时间: 2024-10-10 23:09:06

HTML5之Canvas画布的相关文章

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l

【HTML5】Canvas画布

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. * 添加 canvas 元素.规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200" height="100"></canvas> * canvas 元素本身是没

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

HTML5中的&lt;canvas&gt;画布:简单介绍(0)

<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实 验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

自学HTML5第四节(canvas画布详解)

canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建一个canvas 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas

HTML5中canvas介绍

1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D或WebGL) 首先由 Apple 引入的,用于OS X的仪表盘 和 Safari 浏览器 1.1 关于Canvas的一些说明 canvas 是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素. canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图

html5中canvas的使用 获取鼠标点击页面上某点的RGB

1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 需要谷歌的一个html5.js的文件即可. 注意:必须插入在<head></he

HTML5之Canvas时钟(网页效果--每日一更)

今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:http://webfront.verynet.cc/pc/canvas-clock.html 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式, HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图.详细将在下面代码进行说明. HTML结构代码