HTML5 Canvas

最新推荐文章于 2022-05-20 09:38:36 发布

IMU_Pandade

最新推荐文章于 2022-05-20 09:38:36 发布

阅读量368

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Pandade520/article/details/52443346

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Canvas简介

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，必须使用脚本来绘制图形。
可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.
Internet Explorer 8 及更早 IE 版本的浏览器不支持元素.

使用JavaScript来绘制图像

一个画布在网页中是一个矩形框，通过元素来绘制.默认情况下 <canvas> 元素没有边框和内容。
你可以在HTML页面中使用多个元素.使用 style 属性来添加边框:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;">创建一个画布</canvas>

<script>

    var c=document.getElementById("myCanvas");//找到canvas元素
    var ctx=c.getContext("2d");//创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    //下面的两行代码绘制一个红色的矩形：
    ctx.fillStyle="#ff0000";
    ctx.fillRect(0,0,150,75);
    //设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
    //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
</script>
</body>
</html>

canvas-路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 “ink” 的方法，就像stroke().

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

绘制圆形时使用 “ink” 的方法, 比如 stroke() 或者 fill().

arc(x,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas - 文本

fillcanvas 绘制文本，重要的属性和方法如下：

font-定义字体
fillText(text,x,y)-在canvas上绘制实心文本
strokeText(text,x,y)-在canvas上绘制空心文本
例：使用fillText(), “Arial” 字体在画布上绘制一个高 30px 的文字（实心）：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
//ctx.strokeText("****",10,50);//使用 strokeText():

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1)-创建线条渐变
createRadiaGradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
例：使用 createLinearGradient()创建一个线性渐变。使用渐变填充矩形

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;">创建一个画布</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // Create gradient
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    //Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

创建一个径向/圆渐变。使用渐变填充矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="scream" src="##" alt="##" width="220" height="277">
<p>Canvas:</p>>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #ccc;">创建一个画布</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    var img=document.getElementById("scream");

    img.onload=function(){
        ctx.drawImage(img,10,10);
    }
</script>
</body>
</html>

IMU_Pandade

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas

Canvas简介HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，必须使用脚本来绘制图形。可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素. Internet Explorer 8 及更早 IE 版
复制链接

扫一扫

专栏目录