ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > IT职业 > IT图书 > HTML5的SVG和Canvas的使用

HTML5的SVG和Canvas的使用

IT图书 作者：germo 时间：2021-09-09 09:14:01 0 删除 编辑

本文将学习如何使用Canvas 和使用SVG 实现功能

 

Lab1—— 使用Canvas

Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。

初始化

1. 创建HTML页面

2. 在Body标签内添加Canvas

3. 在

标签内添加Script 标签

4. 在Script 标签内创建JavaScript 函数 Draw ，Draw函数能够访问Canvas 对象

function Draw()
{
        var ctx = document.getElementById('MyCanvas').getContext("2d");      
        //Canvas Code Comes Here
}

 

Lab 1.1 使用 Path

Path 由0个或多个Sub Path组成，每个Sub path 是是由一个或多个终点组成，每个终点是通过直线或曲线连接的。

Lab1.1.1 使用Single 创建Path;

脚本片段：

ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.stroke();
ctx.strokeStyle = "red";
ctx.lineTo(25, 100);
ctx.stroke();

输出：

图片描述

 

上述示例中Path 是由2个子路径组成的。

BeginPath—— 创建新路径

strokeStyle 用于设置样式

每次调用Stroke 方法，所有的子路径都会使用当前的Style 重新画。

Lab 1.1.2 使用Multiple Begin Path创建Path

核心代码：

ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(75, 100);
ctx.strokeStyle = "red";
ctx.lineTo(25, 100);
ctx.stroke();

输出：

图片描述

Lab1.1.3 理解ClosePath

核心代码：

ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.closePath();
ctx.stroke();
输出：

图片描述

Lab1.1.4 理解Fill

核心代码

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fillStyle = "red";
ctx.fill();

输出：

图片描述

Lab1.1.5 画曲线

quadraticCurveTo 函数定义了四个参数，前两个点是控制点，用于曲率计算，后两个参数是终点的曲度核心代码：

ctx.beginPath();
ctx.moveTo(175, 50)
ctx.quadraticCurveTo(60, 360, 175, 300);
ctx.stroke()

输出：

图片描述

Lab 1.2 使用Rectangle

Lab1.2.1 画矩形

ctx.fillStyle="red";
ctx.fillRect(75, 75, 150, 150);
ctx.strokeStyle = "black";
ctx.lineWidth = 5
ctx.strokeRect(175,175,150,150);

输出:

图片描述

Lab1.2.2 清除矩形

代码：

ctx.fillStyle="red";
ctx.fillRect(75, 75, 250, 250);
ctx.clearRect(125, 125, 100, 100);

输出

图片描述

Lab 1.3 使用渐变色

Lab1.3.1 使用线性渐变色

var grd = ctx.createLinearGradient(75, 75, 225, 75);
grd.addColorStop(0, "black");
grd.addColorStop(0.2, "magenta");
grd.addColorStop(0.4, "blue");
grd.addColorStop(0.6, "green");
grd.addColorStop(0.8, "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd
ctx.fillRect(75, 75, 150, 150);

输出

图片描述

注意：

reateLinearGradient 包含四个参数x1,y1,x2,y2

1. 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。

2. 如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。

3. 如果x1!=x2且y1!=y2,渐变色方向则为对角。

AddColorStop 函数包含两个参数。

1. 0到1 之间的数字,用来表示渐变色起始和终点的位置。

2. Color;

Lab1.3.2 使用圆形渐变

代码：

var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85);
grd.addColorStop(0, "orange");
grd.addColorStop(0.2, "magenta");
grd.addColorStop(0.4, "blue");
grd.addColorStop(0.6, "green");
grd.addColorStop(0.8, "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd
ctx.fillRect(75, 75, 150, 150);

输出

图片描述

CreateRadialGradiant包含6个参数，x1,y1,r1,x2,y2,r2

1, x1,y1,r1代表开始圆形的圆心和半径

2. x2,y2,r2 表示结束圆的圆心和半径

Lab 1.4 使用圆形

核心代码：

ctx.beginPath();
ctx.fillStyle="yellow";
ctx.strokeStyle="green";
ctx.lineWidth = "8";
ctx.arc(100, 175, 85, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "green";
ctx.strokeStyle = "yellow";
ctx.lineWidth = "8";
ctx.arc(285, 175, 85, 0, 1 * Math.PI);
ctx.fill();
ctx.stroke();

输出：

图片描述

DrawArc 函数包含5个参数，x,y,r,sa,ea

x 和y 表示圆心

r表示半径

sa 和ea 是开始边缘和结束边缘

Lab1.5 使用Text

代码：

tx.beginPath();
ctx.font = "30px Segoe UI";
ctx.fillText("www.StepByStepSchools.Net",0, 150);

输出：

图片描述

fillText/stokeText具有三个参数

1. 实际输出的文本

2. x,y 是可选值。

Lab 1.6 Scale

ctx.strokeRect(75, 75, 75, 75);
ctx.scale(2,2);
ctx.strokeRect(75, 75, 75, 75);

输出：

图片描述

 

Lab 1.7 旋转

代码片段：

ctx.rotate(0.2);
ctx.strokeRect(75, 75, 75, 75);

输出：

图片描述

Lab 1.8 转换

代码：

ctx.strokeRect(0, 0, 150, 150);
ctx.translate(150, 150);
ctx.strokeRect(0, 0, 150, 150);

输出：

图片描述

 

Lab 1.9 保存和重置Canvas 的状态

ctx.fillStyle="red";
ctx.fillRect(75, 75, 150, 150);
ctx.fillStyle = "blue";
ctx.fillRect(90, 90, 50, 50);
ctx.save();
ctx.fillStyle = "yellow";
ctx.fillRect(90, 160, 50, 50);
ctx.save();
ctx.fillStyle = "green";ctx.restore();
ctx.restore();
ctx.fillRect(160, 160, 50, 50);

输出

图片描述

Lab 1.10 使用图像

vari = new Image();
i.src = "Desert.jpg";
i.onload = function () {
    //Draw Squqrectx.strokeStyle = "green";
    ctx.lineWidth = 5;
    ctx.drawImage(i, 0, 0);
    ctx.strokeRect(60, 120, 70, 80);
        //draw Text
        ctx.strokeStyle = "yellow";
        ctx.font = "30px Segoe UI";
        ctx.lineWidth = 1;
        ctx.strokeText("My Home", 80, 40);
        //Draw Arrow
         ctx.beginPath();ctx.strokeStyle = "red";
        ctx.lineWidth = 2;
        ctx.moveTo(110, 110);
        ctx.lineTo(125, 40);
        ctx.moveTo(110, 110);
        ctx.lineTo(100, 90);
        ctx.moveTo(110, 110);
        ctx.lineTo(126, 95);
        ctx.stroke();
};

输出：

图片描述

 

Lab1.11 使用Canvas 生成动画

一旦在Canvas 填充好东西就无法修改，可采用以下方法来修改：

1. 使用ClearRect 函数删除存在的元素

2. 添加新属性重画元素

当以上策略与传rval;

var x统的JS 函数结合，可使用TimeOut 或SetInterval 方法来实现，可产生动画。

代码：

 = 0, y = 0;
functiondrawInAnimation(){
    varctx = document.getElementById('MyCanvas').getContext("2d");
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.clearRect(x , y, 50, 50);
    if (x >document.getElementById('MyCanvas').width) {
            x = 0;        
            y += 50;
            if (y + 50 >document.getElementById('MyCanvas').height)        {
                        x = 0; 
                        y = 0;
            }
    }else {
            x += 15;
    }
    ctx.fillStyle = getRndColor();
    ctx.fillRect(x, y,50,50);
    }functiongetRndColor() {
    var r = 255 * Math.random() | 0,
    g = 255 * Math.random() | 0,        
    b = 255 * Math.random() | 0;    
    return 'rgb(' + r + ',' + g + ',' + b + ')';
    }interval = setInterval("drawInAnimation()", 15);


输出：

图片描述

 

Lab 2 使用SVG 工作

如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。

初始化

1. 新建HTML页面

2. 在body 标签内新建Canvas :
 >

Lab2.1 画出多种形状

代码：


    <!--surrounding border-->
     
    <!--surrounding border-->
    <!--Hat Start-->
    
              
    <!--Hat End-->
    <!--Left ear-->
    
    <!--Right ear-->
    
    <!--Face-->
    
    <!--Left Eye-->
    
    <!--Left Eye ball-->
    
    <!--Right Eye-->
    
    <!--Right Eye ball-->
    
    <!--Mouth start-->
    
        
    
    
    <!--Mouth End-->
    <!--Nose-->
    
    <!--Divider-->
    
    A coder can be creative

输出：

图片描述

Lab 2.2SVG 动画

SVG 使得动画制作变得简单：

初始化设置：


        
        
....

眨眼动画：

<!--Left Eye-->
        
        <!--Left Eye ball-->
        
            
            
            
            
            
            
            
            
            
            
            
 
<!--Right Eye-->
        
        <!--Right Eye ball-->
        
            
            
            
            
            
            
            
            
            
            
 

张嘴动画：


    
        
        
        
        
        
        
        
        
    
    
    
    
    
    
    
    
    
    
    
    
    

盒子动画效果：

<!--Box Anmation-->
        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        
        A coder can be creative

输出


图片描述

SVG VS Canvas


SVG 和Canvas 区别：

  • Vector VS Pixel

Canvas 是基于Pixel 而SVG 是基于Vector

图片描述

 

图片描述

 

简单来说SVG图片是与屏幕分辨率无关的，而Canvas 不是。

  • XML VS JavaScript

SVG使用语义标记可绘出图形，然而Canvas就只能使用JS脚本代码。

  • 支持事件处理

Canvas 不支持事件处理，SVG 支持。

HTML

 
        
    

JavaScript

输出：

图片描述

Canvas 最后可输出为图像，可使用浏览器默认的选项将图像保存。而SVG 不支持。

图片描述


来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/1868/viewspace-2808802/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： ant-ivy入门使用
下一篇： php实现网站浏览足迹功能
请登录后发表评论 登录
全部评论
germo

注册时间：2019-07-17

  • 博文量
    209
  • 访问量
    8226

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593