IntelliJ IDEA WebStorm HashMap 顺序查找 作用域 矿工文档 Android开发 macos generics uiviewcontroller binding vue实现原理 input边框颜色 如何升级python nfc卡片 磁盘清理会误删东西吗 wps文件修复工具下载 python语言编程入门 python模块下载 python传递参数 javatrim java字符串查找 java方法 java遍历文件夹下所有文件 java八种基本数据类型 linux基础教程 linux安装系统 php网络编程 ie模拟器 sql综合利用工具 m4a转mp3格式转换器 网络是怎样连接的 图片批量处理工具 识别音乐的软件 页面刷新 lol卡米尔 文章查重软件 小米9截图 小程序游戏源码 layout下载
当前位置: 首页 > 学习教程  > python

canvas学习这一片果然就够了(一)

2021/2/6 22:54:09 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

canvas学习这一片果然就够了(一) 文章目录canvas学习这一片果然就够了(一)前言一、canvas基础篇一、canvas是神马二、可以用来干什么三、浏览器支持情况四、简单使用 -创建画布五、js绘制图像六、canvas坐标七、canvas路径八、Can…

canvas学习这一片果然就够了(一)

文章目录

  • canvas学习这一片果然就够了(一)
  • 前言
  • 一、canvas基础篇
    • 一、canvas是神马
    • 二、可以用来干什么
    • 三、浏览器支持情况
    • 四、简单使用 -创建画布
    • 五、js绘制图像
    • 六、canvas坐标
    • 七、canvas路径
    • 八、Canvas - 文本
    • 九、Canvas - 渐变
    • 10、Canvas - 图像
  • 总结


前言

从0 开始使用 标签定义图形,用脚本来绘制属于我们自己想要的内容

一、canvas基础篇

一、canvas是神马

HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

标签只是图形容器,必须使用脚本来绘制图形。

我们可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

二、可以用来干什么

标签定义图形,比如图表和其他图像,必须使用脚本来绘制图形。

在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字等。

三、浏览器支持情况

在这里插入图片描述

四、简单使用 -创建画布

一个画布在网页中是一个矩形框,通过 元素来绘制.

注意: 默认情况下 元素没有边框和内容。

简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 元素.

使用 style 属性来添加边框:
ex:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

五、js绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

首先,找到 元素:

var c=document.getElementById(“myCanvas”);
然后,创建 context 对象:

var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

六、canvas坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

七、canvas路径

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

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到的方法stroke().
在这里插入图片描述

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

在canvas中绘制圆形, 我们将使用以下方法:

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

实际上我们在绘制圆形时使用 比如 stroke() 或者 fill().
在这里插入图片描述

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

八、Canvas - 文本

使用 canvas 绘制文本,重要的属性和方法如下:

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
在这里插入图片描述

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

使用 strokeText():
在这里插入图片描述
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=“30px Arial”;
ctx.strokeText(“Hello World”,10,50);

九、Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变:

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

使用 createLinearGradient():
在这里插入图片描述

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

使用 createRadialGradient():
在这里插入图片描述

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

10、Canvas - 图像

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

drawImage(image,x,y)

在这里插入图片描述

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

总结

将搜集到的宝贝儿分享给大家:
canvas参考手册
canvas属性配置参考手册

下一篇canvas实战篇


本文链接: http://www.dtmao.cc/news_show_2000147.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?