IT辅导娱乐网| 蜘蛛地图| 所有文章|
HTML5 <canvas>画布如何使用? - IT辅导
  • 首页
  • IT技术 IT辅导资源网设计图
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享 IT辅导资源网设计图
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧 IT辅导资源网设计图
    • seo教程
  • 编程教程
  • 值得看一看 IT辅导资源网设计图
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能 IT辅导资源网设计图
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿


登录后,享受更多优质服务哦
IT辅导资源网站长qq头像
欢迎回来,可爱的会员!个人中心退出登录
导航菜单
  • 首页
  • IT技术
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧
    • seo教程
  • 编程教程
  • 值得看一看
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿

HTML5 <canvas>画布如何使用?

2020/9/9 五年级扛把子 

HTML5 <canvas> 标签用于绘制图像(通过JavaScript)。<canvas> 元素本身并没有绘制能力,它相当于一块画布,需要使用js脚本来填充,实现绘绘制。

注意:

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 都支持 <canvas> 标签的属性及方

法。但是Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。

<canvas>的使用

简单的说明,代码如下:

<canvas id="test-canvas" width="300" height="300">
设置画布容器
</canvas>

1.获取容器信息

var canvas = document.getElementById('canvas');

2.配置绘制环境(必要项)

var test = canvas.getContext('2d');

test.beginPath(); // 意思是开始绘制

3.绘制简单线条(举例)

test.moveTo(10,10); // 这里的第一个参数是x轴,第二个参数是y轴
test.lineTo(x,y); // 下个一个点坐标

4.绘制结束

test.closePath();//必须添加
test.stroke() ;

<canvas>绘制图像的方式:

test.fill()  // 填充 
test.stroke(); // 绘制边框

注意:在绘制前,要先设置好它们的样式。

test.fillStyle//填充的样式

例如:

test.fillStyle = 'red';  //填充的颜色为红色
test.strokeStyle//边框样式
test.lineWidth = 8; // 设置线条的宽度 为8

绘制空心矩形:

/**
*x  y  width  heigth  的参数  
* 注意:绘制图像坐标以图像左上角为起点
**/
test.strokeRect(100,100, 50,50);

绘制有实心矩形:

test.fillRect(100,100,100,100);   // 实心矩形

清空(在已绘制图像上操作):

/**
* x:清除矩形起点横坐标   y:清除矩形起点纵坐标
* width:清除矩形长度   height:清除矩形高度
**/
context.clearRect(x,y,width,height) ;

示例如下:

test.fillRect(100,100,100,100);
test.clearRect(120,120,30,30);
test.stroke()//绘制结束

效果如下图:


绘制圆:

//

/** *有6个参数 1.圆心的x轴坐标 2.圆心的y轴坐标 3.半径的长度
*4.开始的角度(straAngle) 5.结束的角度 (endAngle) *4.开始的角度(straAngle) 5.结束的角度 (endAngle) *6.是否是逆时针 true)为逆时针,(false)为顺时针 */ context.arc(250,250,100,0,Math.PI,true);

线性渐变:

var lg = test.createLinearGradient(x起始位置,y起始位置,x结束位置,y结束位置);

// offset:设定的颜色离渐变结束点的偏移量(0~1) color:绘制时要使用的颜色

lg.addColorStop(offset,color)

test.fillStyle = lg; //添加渐变条件完成后需将添加条件赋值给test

test.fillRect(100,100,100,100)//设置图片大小

圆形径向渐变:

/**1. xStart:发散开始圆心x坐标

*2. yStart:发散开始圆心y坐标
*3. radiusStart:发散开始圆的半径 *4. xEnd:发散结束圆心的x坐标

*5.yEnd:发散结束圆心的y坐标

*6.radiusEnd:发散结束圆的半径
**/ var rg = test.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

图形的旋转 rotate()    

test.rotate(Math.PI/4); // 意思是坐标轴旋转的度数

图形的平移   translate()

test.translate(x,y); // x 轴的平移量 y 轴的平移量

图形的缩放 scale()

test.scale(x,y) ; // x 轴按照x比例进行缩放 y轴按照y比例进行缩放



图形的阴影:

test.shadowOffsetX = 5; // 阴影在 x 轴的偏移量

test.shadowOffsetY = 5; //阴影在 y 轴的偏移量

test.shadowColor = 'red'; // 设置阴影的颜色

test.shadowBlur = 100; // 模糊程度 (值越大越模糊)

图形的组合 :

test.globalCompositeOperation=type;

图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢,还是相互重叠的部分不显示等等,至于怎么显示就取决于type的值了 

type值:

source-over(默认值):  在原有图形上绘制新图形
destination-over:    在原有图形下绘制新图形
source-in:      显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色
destination-in:    显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色
source-out:   只显示新图形非交集部分
destination-out:   只显示原有图形非交集部分
source-atop:     显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色
destination-atop:     显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色
lighter:    原有图形和新图形都显示,交集部分做颜色叠加
xor:   重叠飞部分不现实
copy:  只显示新图形 

 


 点赞:0  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
结束语
温馨提醒:如有技术问题以及资源失效请联系站长 QQ89549822 进行反馈!!!
 您阅读本文耗时: 0小时02分35秒
热度:312° 发布时间:2020年9月9日

推荐:

标题:HTML5 &lt;canvas&gt;画布如何使用?

链接: https://www.itfd.cn/post-1280.html

版权:转载请注明来源于【IT辅导娱乐网】为原创

上一篇: IntelliJ IDEA(2019)创建springboot项目

下一篇: javascript:void(0)是什么含义?

作者头像 作者名称 作者性别
五年级扛把子
联系作者 作者主页

热门推荐

1 Python算数运算符
2 Linux解压文件
3 Javabean是什么以及使用场景
4 Java BeanUtils使用方法详解
5 电脑新手先要掌握哪些基础知识才行it辅导
6 sleep()和 wait()有什么区别?

评论列表

取消回复

  • 存档

    • 2020年9月(191)
    • 2020年8月(92)
    • 2020年7月(5)
    • 2020年6月(224)
    • 2020年5月(392)
    • 2020年4月(267)
    • 2020年3月(76)
    • 2019年3月(1)
    • 1970年1月(29)
  • 搜索

  • 热门文章

    • 神佑之路手游源码-附视频教程
    • 最新可用老王VPN2.22.15谷歌市场版,免费使用
    • 私藏的十个网站,不看后悔系列
    • 虚拟商品自动发货商城源码
    • 不吃苦、不奋斗,你要青春做什么?
  • 随机文章

      • eclipse快捷键大全
        • PHP数组遍历
          • Python IDLE常用快捷键介绍
            • Python变量定义与使用
              • Redis数据类型介绍
    提示信息

    SQL语句执行错误: SELECT COUNT(*) AS total FROM emlog_twitter
    Table 'itfd.emlog_twitter' doesn't exist

    «点击返回