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);
*请认真填写需求信息,我们会在24小时内与您取得联系。