HTML5中的canvas（画布）

1、关于canvas的简介

1.canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。
2.canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏等等。
3.支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。

2、创建和获取

① 查看当前浏览器是否支持canvas：
可以在canvas标签内书写提示内容，若当前浏览器不支持canvas，则显示提示内容。
例：

<canvas height="600" width="400">您的浏览器过低，请更换高版本再试</canvas>

注：canvas画布是一个矩形区域，里面的每一个像素都可以被控制。应在canvas标签内设置width和height属性，不要在css里设置，避免以后canvas画出的图像变形（拉伸或者缩放）。
②获取绘制环境：
例：

//获取到canvas标签
var canvas = document.getElementsByTagName('canvas')[0];
//获取绘制上下文对象
var ctx = canvas.getContext('2d');

注：getContext()方法返回一个用于在画布上绘图的环境。此处语法：canvas.getContext(‘2d’)，参数2d指定了你想要在画布上绘制的类型，当前唯一的合法值为"2d"，它指定了二维绘图(2D)。

3.路径方法

方法	说明
beginPath()	开始定义路径
closePath()	自动闭合前面定义的路径
moveTo(x, y)	把canvas的当前路径的结束点移动到x, y对应的点
lineTo(float x, float y)	把canvas的当前路径从当前结束点连接到x, y对应的点
fill()	填充canvas当前路径
stroke()	填充canvas当前路径绘制边框（描边）
fillStyle()	设置填充canvas路径所使用的填充样式
strokeStyle()	设置绘制canvas路径的填充样式
lineWidth()	设置路径显示的宽度

4.绘制图形

（1）直线

//直线
ctx.beginPath();
ctx.moveTo(600,50);
ctx.lineTo(400,50);
ctx.closePath();
//宽度
ctx.lineWidth=2;
//边框颜色，若不设置则默认黑色
ctx.strokeStyle='pink';
//描边
ctx.stroke();

（2）三角形

//三角形
ctx.beginPath();
ctx.moveTo(500, 50);
ctx.lineTo(500, 150);
ctx.lineTo(300, 150);
//绘制线条以返回开始点
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = 'lightblue';
ctx.stroke();

（3）圆和半圆

//圆形ctx.beginPath();//圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针ctx.arc(250,250,50,0,2*Math.PI);ctx.fill()//半圆ctx.beginPath();//圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针ctx.arc(100,250,50,0,Math.PI);ctx.fill()

HTML5中的canvas（画布）相关推荐

HTML5 中的 canvas 画布（二）
绘制图片一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
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技术,以及 ...
用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() ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...

HTML5中的canvas（画布）

HTML5中的canvas（画布）

1、关于canvas的简介

2、创建和获取

3.路径方法

4.绘制图形

HTML5中的canvas（画布）相关推荐

最新文章

热门文章