整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

怎么入门html5绘制图形?你需要了解这几点!

tml5中是怎么实现绘制图形?

html5中可以实现绘画图形的功能,需要注意的是html5只提供2D,不提供3D绘画功能。canvas元素是H5总新增的元素,它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”,我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形,实际上在H5完成绘画功能,不仅仅需要canvas元素,而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

html5中的canvas元素

canvas元素必须要指定id、width(宽)、height(高)属性,虽然canvas元素是H5中用来绘制的图形,但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

html5中的常用的绘制图形

绘制矩形

创建canvas元素→取得上下文(使用canvas对象的getcontent方法获得上下文)→填充绘制边框→设定样式→指定线宽、颜色。代码如下图:

可以用clearRect方法擦除指定区域的图形,使矩形区域颜色变透明context.clearRect(x,y,width,height)。

绘制圆形

绘制圆形要比矩形复杂一点,需要使用到路径,创建图形路径→关闭路径→调用绘制方法、路径。代码如下:

cxt.beginPath();是开始创建路径,有几次是循环创建路径,每次开始都需要调用beginPath()函数。

cxt.arc(70,18,15,0,Math.PI*2,true);是是创建路径,使用了arc()方法,它的语法如下:

cxt.closePath();cxt.fill();关闭绘画路径后调用绘制路径。最后给大家一个作业,你可以试试下面的代码在浏览器执行后会是什么图形?

关于“html5中绘制图形”先聊到这。每天学习一个知识点,每日寄语”人生之苦,苦在选择,人生之难,难在放弃”如转载清标明出处。

绍HTML5中的一个新增元素——canvas元素以及伴随这个元素而来的一套编程接口——canvas API。

使用canvas API可以在页面上绘制出任何你想要的、非常漂亮的图形与图像,创造出更加丰富多彩、赏心悦目的Web页面。

通过阅读,您可以:

 掌握canvas元素的基本概念

 学会如何在页面上放置一个canvas元素

 学会如何使用canvas元素绘制出一个简单矩形

 掌握使用路径的方法,能够利用路径绘制出圆形与多边形

 掌握渐变图形的绘制方法,学会图形变形、图形缩放、图形组合以及给图形绘制阴影的方法

 掌握在canvas画布中使用图像的方法

 掌握如何在画布中绘制文字,给文字加上边框的方法

 掌握如何保存及恢复绘图状态

canvas的基础知识

HTML5中的canvas有很多功能,这里只介绍HTML5中canvas的一些基础知识,

并展示一些可以使用画布元素实现的实用的内容,例如处理来自画布中的一幅图像的单个像素。

 canvas的由来

canvas的概念最初是由苹果公司提出的,

用于在Mac OS X WebKit中创建控制板部件(Dashboard Widget)。

在canvas出现之前,开发人员若要在浏览器中使用绘图API,

只能使用Adobe的Flash和SVG(可伸缩矢量图形)插件,或者只有IE才支持的VML(矢量标记语言),

以及JavaScript中的一些技术。假设我们要在没有canvas元素的条件下绘制一条对角线,

此时如果没有一套二维绘图API的话,这会是一项相当复杂的工作。

HTML5中的canvas就能够提供这样的功能,对浏览器端来说这个功能非常有用,

因此canvas被纳入了HTML5规范。

最靠谱的WEB前端教程——整整140集,全程干货无废话,学完变大佬!

码:

<!DOCTYPE html>

<html>

<head>

<meta charset=”gbk”>

<title>中国标准国旗</title>

</head>

<body>

<canvas id=”canvas” width=”600″ height=”400″></canvas>

<script>

/**

使用HTML5绘制标准五星红旗

*/

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

var width=canvas.width;

var height=width*2/3;

var w=width/30;//小网格的宽

context.fillStyle=”red”;

context.fillRect(0,0,width,height);

var maxR = 0.15, minR = 0.05;//

var maxX = 0.25, maxY = 0.25;//大五星的位置

var minX = [0.50, 0.60, 0.60, 0.50];

var minY = [0.10, 0.20, 0.35, 0.45];

// 画大☆

var ox = height * maxX, oy = height * maxY;

create5star(context,ox,oy,height * maxR,”#ff0″,0);//绘制五角星

// 画小★

for (var idx = 0; idx < 4; idx++) {

var sx = minX[idx] * height, sy = minY[idx] * height;

var theta = Math.atan((oy – sy)/(ox – sx));

create5star(context,sx, sy, height * minR, “#ff0”,-Math.PI/2+theta);

}

//辅助线

context.moveTo(0,height/2)

context.lineTo(width,height/2);

context.stroke();

context.moveTo(width/2,0);

context.lineTo(width/2,height);

context.stroke();

//画网格,竖线

for(var j=0;j< 15;j++){

context.moveTo(j*w,0);

context.lineTo(j*w,height/2);

context.stroke();

}

//画网格,横线

for(var j=0;j< 10;j++){

context.moveTo(0,j*w);

context.lineTo(width/2,j*w);

context.stroke();

}

//画大圆

context.beginPath();

context.arc(ox,oy,maxR*height,0,Math.PI*2,false);

context.closePath();

context.stroke();

// 画小圆

for (var idx = 0; idx < 4; idx++) {

context.beginPath();

var sx = minX[idx] * height, sy = minY[idx] * height;

context.arc(sx, sy, height * minR,0,Math.PI*2,false);

context.closePath();

context.stroke();

}

//大圆中心与小圆中心连接线

for (var idx = 0; idx < 4; idx++) {

context.moveTo(ox,oy);

var sx = minX[idx] * height, sy = minY[idx] * height;

context.lineTo(sx, sy);

context.stroke();

}

//绘制五角星

/**

* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上

* rotate:绕对称轴旋转rotate弧度

*/

function create5star(context,sx,sy,radius,color,rotato){

context.save();

context.fillStyle=color;

context.translate(sx,sy);//移动坐标原点

context.rotate(Math.PI+rotato);//旋转

context.beginPath();//创建路径

var x = Math.sin(0);

var y= Math.cos(0);

var dig = Math.PI/5 *4;

for(var i = 0;i< 5;i++){//画五角星的五条边

var x = Math.sin(i*dig);