h5--新增标签详细的学习--canvas

最新推荐文章于 2022-12-19 21:05:40 发布

原创最新推荐文章于 2022-12-19 21:05:40 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#h5

H5 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素进行基本图形绘制，包括设置画布、绘制矩形、圆形等，并介绍了坐标系、填充样式及贝塞尔曲线的绘制方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.canvas简单绘制一个框，注意给canvas加专属id，用来定义样式css。

2.简单图形的绘制：

其实canvas不能画图，它只是画布，画布框，相当于table，form，ol，li一样，只是一个外框。

绘制工作通过javascript脚本实现。添加图形，绘画

a.添加一个画布，制定id值。

b.在脚本中写东西

var c=document.getElementById("myCanvas"); 
var context = c.getContext("2d");

代码：


<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");		<!-- 获取指定id的画布-->
var context = c.getContext("2d");		<!-- getcontext获取上下，文创建一个context对象来获取允许进行绘制的2d环境  返回一个内建的对象，使用这个对象可以进行绘图 -->
<!--然后调用context方法进行绘制-->
context.fillStyle="#ff00ff";
context.fillRect(50,25,100,50);<!--然后调用context方法进行绘制矩形前为坐标（50,25） 长宽 100 50 -->
</script>
</body>

结果：

3.认识canvas坐标：

坐标相对与画布左上角，x向右，y向下。

4.何时不用canvas：

渲染一个标签效果有更好方法时，可以使用背景图像时，不要使用canvas。

5.如果浏览器不支持canvas：考虑这个问题，在canvas中包含一些提示性信息文本，如果canvas可用就不会显示这段文本，如果canvas不可用这段文本才显示。

6.检测浏览器支持

7.画直线

8.绘制矩形strokeRec绘制边线轮廓。fillRec绘制填充。fillstyle与strokestyle的区别也是与填充颜色，轮廓线颜色的区别

可以使用strokeStyle描绘颜色十六进制或rgb函数都可以，rgb百分比，rgba（，，，） strokeRct描绘区域轮廓

9.绘制圆形

context.beginPath()开始绘制

arc：绘制弧线 1,2 坐标点 3 半径 4 开始角度 5 结束角度 Math.PI*2，6 true是顺时针方向绘制。

context.closePath()

context.fill()填充色进行填充。

同心圆：

10.绘制三角形：

11.清空画布：context.clearRect(0,0,300,200)

12.quadraticCurveTo(75,50--控制点，300,200--终点)绘制2次方贝塞尔曲线。

13.besizeCurveTo(25,50--第一个控制点，75,50--第一个控制点，300,200--终点)绘制3次方贝塞尔曲线。

14.保存与恢复canvas状态：context.save()暂时保存到堆。context.restore()：将保存的取出恢复状态

15.移动坐标空间：单位：像素

使用translate移动原点偏移位置：context.translate(80,80);

例子：绘制渐变小伞

<body>
<canvas id="myCanvas" style="border:1px solid;" width="700" height="300">
<script language="javascript">
function drawTop(ctx,fillStyle){
	ctx.fillStyle = fillStyle;
	ctx.beginPath();
	ctx.arc(0,0,30,0,Math.PI,true);
	ctx.closePath();
	ctx.fill();	
	}
function drawGrip(ctx){
	ctx.save();
	ctx.fillStyle = "blue";
	ctx.fillRect(-1.5, 0, 1.5, 40);
	ctx.beginPath();
	ctx.strokeStyle = "blue";
	ctx.arc(-5, 40, 4, Math.PI, Math.PI*2,true);
	ctx.stroke()
	ctx.closePath();
	ctx.restore();
	}
function draw(){
	var ctx = document.getElementById("myCanvas").getContext("2d");
	ctx.translate(80,80);
	for(var i=1; i<10; i++){
		ctx.save();
		ctx.translate(60*i, 0);
		drawTop(ctx, "rgb("+(30*i)+","+(255-30*i)+",255)");
		drawGrip(ctx);
		ctx.restore();
		}
	
	}
window.onload = function(){
	draw();
	}
</script>
</body>