1200字范文 > H5 canvas画布总结（绘制哆啦A梦）

H5 canvas画布总结（绘制哆啦A梦）

时间：2022-03-02 00:02:06

canvas标签

只是图形容器定义图形，使用 canvas 绘制路径,盒、圆、字符以及添加图像

1.创建一个画布

<canvas id='cv' width='400px' height='600px'></canvas>

2.绘制图形(javastript)

var cv_1 = document.getElementById("cv");var can = cv_1.getContext('2d');

解析：

首先，找到canvas元素： var cv_1 = document.getElementById(“cv”);

然后，创建context对象： var can = cv_1.getContext(‘2d’);

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas--矩形：

// 填充颜色can.fillStyle = "rgb(200,0,0)";//绘制矩形can.fillRect (10, 10, 55, 50);can.fillStyle = "rgba(0, 0, 200, 0.5)";can.fillRect (50, 50, 55, 50);

解析：

（1）fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

（2）fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

x,y为相对位置，width,height为绘制的矩形的宽高

（3）clearRect(x,y,width,height) 清除指定区域大小

canvas坐标
距离屏幕左上角左边10px，上边10px，宽600px,高400px的矩形
fillRect(10，10，600，400)

Canvas--路径

// 绘制一条直线can.beginPath(); //新建一条pathcan.moveTo(50, 50); //把画笔移动到指定的坐标can.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做can.closePath();can.stroke(); //绘制路径。

解析：

（1）moveTo(x,y) 定义线条开始坐标

（2）lineTo(x,y) 定义线条结束坐标

（3）beginPath()开始绘制

（4）closePath()结束绘制

Canvas--圆弧

can.beginPath();can.arc(95,50,40,0,2*Math.PI);can.stroke();

解析：

路径方向默认为false（顺时针）

can.beginPath();can.arc(320, 220, 40, 0, -Math.PI / 2, true);can.fillStyle = 'red'can.closePath();can.fill();

Canvas--文本

can.font="30px Arial";can.fillText("Hello World",10,50);can.strokeText("Hello World",10,100);

解析：

（1）font - 定义字体

（2）fillText(text,x,y) - 在 canvas 上绘制实心的文本

（3）strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas--渐变

线性渐变：

// 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// 填充渐变can.fillStyle=grd;can.fillRect(10,10,150,80);

径向渐变：

// 创建渐变var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// 填充渐变can.fillStyle=grd;can.fillRect(10,10,150,80);

解析：

（1）createLinearGradient(x,y,x1,y1) - 创建线条渐变

（2）createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

（3）addColorStop(0-1,“red”); 指定颜色停止，参数使用坐标来描述，可以是0至1

3.应用canvas绘制哆啦A梦

在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

getBoundingClientRect()获取页面中某元素的左、上、右、下相对与浏览器窗口的位置

<style type="text/css">div{width: 50px;height: 50px;border: 1px solid #000000;position: relative;}#cv{margin: 0 auto;display: block;border: 2px solid #F0F8FF;}</style><canvas id="cv" width="400px" height="600px"></canvas><div id="divx" style="top: -600px;"></div><div id="divy" style="top: -600px;"></div>

补充内容：
二级贝塞尔曲线:quadraticCurveTo(cp1x, cp1y, x, y)
三级贝塞尔曲线:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
说明：
参数 1 和 2：控制点 1 的坐标
参数 3 和 4：控制点 2 的坐标
参数 5 和 6：结束点的坐标

//二级贝塞尔曲线绘制can.moveTo(330,45)//路径起点can.quadraticCurveTo(380,100,430,45)can.lineWidth = 2can.strokeStyle = 'blue'can.stroke()//三级贝塞尔can.moveTo(350,210)can.bezierCurveTo(440,310,460,110,550,210)can.fillStyle = 'yellowgreen'can.stroke()can.fill()can.closePath()

哆啦A梦完整代码：

效果图：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。