HTML5 中的 canvas 画布(二)
绘制图片
一.绘制图片 context.drawImage()(即把图片放到canvas里)
var image = new Image(); // 先创建图片对象
image.src = '图片的位置';
1. context.drawImage(image,20,20); //三个参数 1.图片 2.x轴位置 3.y轴位置 图片的原本大小
2. context.drawImage(image,0,0,300,400) //5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片的宽度 5. 绘制图片的高度
3.context.drawImage(image,10,10,100,100,200,200,100,100); //9个参数 1.图片对象 2.3.4.5.个参数 我们截取部分的图片中的位置和大小
6,7个参数是新图的位置 8,9, 截取后图片的大小
image.onload = function(){
context.drawImage(image,0,0,300,400); // 5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片的宽度 5. 绘制图片的高度
}
二.改变图片像素的颜色 context.putImageData()
概念:对imagedata数组中的各个像素的r、g、b、a值进行修改,再调用putImageData方法进行绘制;
绘制文字
填充文字: context.fillText(text,x,y) // 实心文字 x:文字起点的x坐标轴 y:文字起点的y坐标轴
绘制文字轮廓 : context.strokeText(text,x,y) // 空心文字
绘制文字样式:context.font:'40px Arial'; // 40px大小的Arial
水平对齐方式: context.textAlign: ( start、end、right、center);
垂直对齐方式: context.textBaseline( top、hanging、middle、alphabetic、ideographic、bottom);
下面是代码和 输入的样式:
context.font = '40px Arial';
var text = 'fill 的例子演示';
context.fillText(text,100,100);
context.strokeText(text,100,150);
储存
context.save():调用该方法,会保存当前context的状态、属性(把他理解成游戏存档)
恢复
context.restore():调用该方法就能恢复到save时候context的状态、属性(游戏回档)
绘制贝赛尔曲线
context.bezierCurveTo(x1,y1,x2,y2,x3,y3); // (x1,y1)第一个控制点 (x2,y2)第二个控制点 (x3,y3)锚点
绘制二次样条曲线
context.quadraticCurveTo(x1,y1,x2,y2); // (x1,y1)控制点 (x2,y2)锚点
图片的平铺
context.createPattern(image, no-repeat || repeat-x || repeat-y || repeat) ;
no-repeat 不平铺 repeat-x 沿x轴平铺 repeat-y 沿y轴平铺 reoeat 全图平铺
图片的剪裁
context.clip() //只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候 1.先创建裁剪区域 2.再绘制图像
转载于:https://www.cnblogs.com/Sabo-dudu/p/5854592.html
HTML5 中的 canvas 画布(二)相关推荐
- HTML5中的canvas(画布)
HTML5中的canvas(画布) 1.关于canvas的简介 1.canvas是HTML5标签,表示画布,canvas只是作为图像绘制的容器,所有的绘制工作都在脚本JavaScript内部完成. 2 ...
- html5中用画布画小狗,HTML5中的Canvas(绘制)
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 矩形 我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数: ctx.fil ...
- HTML5 中的canvas元素用于,HTML5中的Canvas元素
canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...
- php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下 今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
- 在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报 文章目录 在H5.微信小程序中使用canvas绘制二维码.分享海报 前言 一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
- 用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸 发布时间:2021-02-26 09:33:14 来源:亿速云 阅读:75 作者:清风 这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
- 使用HTML5中的canvas绘制灰太狼图像
大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助. 下图是效果图: 以下就是实现的代码: <!DOCTYPE html&g ...
- html5图层重叠,如何在html5中的canvas下实现ps中的叠加效果?
侃侃无极 html5中的canvas本身的API是不存在图层概念的.要想实现实现多图层功能,必须要使用多个canvas对象,不过这些canvas对象,是在内存中的,而不是在html的元素树中.每个ca ...
- HTML菊花图案绘制,用HTML5中的canvas元素画菊花
用html5中的canvas画出的三种菊花,书上看到的例子,拿来当联系玩. 使用Canvas元素绘制美丽的花朵 var context; var A,n; function btn_onclick() ...
最新文章
- php i o优化,PHP之高性能I/O框架:Libevent(一)
- Ubuntu 配置大数据平台hadoop hive数据仓库之完整踩坑
- c++语言表白超炫图形_教你用C语言加图形库打造炫酷表白连连看
- mysql 索引生命周期_MYSQL 索引(一)--- 简介
- python技术是什么_学 Python 都用来干嘛的?
- workbench拓扑优化教程_workbenchds拓扑优化分析.ppt
- 浅谈关于java中的深浅拷贝
- 【Python CheckiO 题解】Bird Language
- OpenGL实用开源代码列表
- 解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题
- oracle的创建视图,oracle 创建视图
- Ubuntu中配置jdk环境变量
- 小说站源码(带自动采集开源小说网站源码)
- setiosflags与setw使用说明
- 如何求复数的模用计算机,复数计算器(复数运算工具)
- linux聊天室项目课程设计,网络编程课程设计报告--基于linux网络聊天室设计.docx...
- 1-8代酷睿全部中招,英特尔处理器再曝漏洞
- mui短信验证html,mui登录界面(验证)
- eclipse:解决 The word is not correctly spelled问题
- 深圳招银java社招都有hr面吗,深圳招银网络科技