博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5 Canvas处理图像 实例讲解
阅读量:7227 次
发布时间:2019-06-29

本文共 896 字,大约阅读时间需要 2 分钟。

最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结:

canvas常用功能:

1. 绘制矩形、圆形、曲线、组合图形

2. 绘制文本

3.绘制渐变、变形的图形

4. 图片处理功能:绘制图片到画布、裁剪图片、

 

步骤:

1.在html中新增canvas元素,建议在canvas元素中设置width和height

2.编写js代码(需要在onload时调用绘制图形的函数):

2.1 获取画布

2.2 获取画笔:图像上下文、封装了图像绘制功能的对象,目前只支持2d

2.3 设置图像样式:填充样式(fillStyle)和边框样式(strokeStyle)

2.4 指定线宽:lineWidth

2.5 图像变形:平移translate(x,y)、缩放scale(x,y)、旋转rotate(rangle)

2.6 填充(fill)与绘制边框(stroke)

 

示例:

1.绘制矩形

Examples
View Code

运行图像:

2.操作图像

火狐浏览器第一次打开时可能报错:NS_ERROR_NOT_AVAILABLE,运行后刷新浏览器即可

Canvas_Image

Canvas 处理图像

View Code

运行图像:

 

转载于:https://www.cnblogs.com/WebMobile/p/4001541.html

你可能感兴趣的文章
常见面试题—css实现垂直水平居中
查看>>
lc682. Baseball Game
查看>>
重学前端-css选择器
查看>>
iOS开发之扫描二维码
查看>>
Android黑科技: 快速找到view所在的xml文件
查看>>
linux分区方案
查看>>
003-Java技术体系
查看>>
超轻量模板引擎
查看>>
JavaScript 复习之 Object对象的相关方法
查看>>
JAVA之流程控制语句
查看>>
Spring Boot(1)
查看>>
Winodws 10 美化与调优
查看>>
apache安装及多域名解析及域名代理
查看>>
什么是自动化运维 ? 自动化运维的设计思路以及实战
查看>>
Python练习实例100例(持续更新中)
查看>>
非父组件通信
查看>>
Electron系列文章-主进程与渲染进程
查看>>
高性能缓存服务器 nuster v1.8.8.2 和 v1.7.11.2 发布
查看>>
教你快速入门ES6
查看>>
Python 爬虫十六式 - 第六式:JQuery的假兄弟-pyquery
查看>>