canvas初级教学

来源：互联网 2023-03-16 19:18:05 版权归原作者所有，如有侵权，请联系我们

主要内容：

1.如何实现用canvas输出图像

2.如何用canvas绘制指定形状

3.如何用canvas制做简单动画

工具/原料

html编辑器（也可使用网页在线编辑器，推荐菜鸟教程）
准备几张网页图片的链接

方法/步骤

为了简单便捷的进行学习，此处我们采用菜鸟教程提供的网页编辑器来进行学习html中canvas组件的初级教程,首先是创建争耕一个canvas组件，然后定义id和class。

id的作用是方便通过Javascript寻找到canvas组件

通过id查找组件用法示例：

var canvas = document.getElementById("canvasId");

class则是用来定义样式，当然也能够用来寻找组件

通过class查找组件用法示例：

var canvas = document.getElementsByClassName("canvasId")[0];

用这个方法查找返回的是一个对象数组，因为class标签在html中并非唯一标识

canvas初级教学

了解了一些基本操作后，接下来就是实践了，主要通过示例演示。

示例显示图片

!DOCTYPE html>

html>head>meta charset="utf-8">

title>canvas基础教学/title>/head>

body>canvas id="demo" class="demo">/canvas>/body>

script>

var canvas_element = document.getElementById("demo");//获取元素

var canvas_blank = canvas_element.getContext("2d");//创建一个画布

var img = new Image();//创建一个图像对象

img.src = '此处为网络图片地址';

img.onload = function ()//加载图像并绘制

{canvas_element.width = img.width;//定义显示图像的宽度

canvas_element.height = img.height;//定召场追义显示图像的高度

canvas_blank.drawImage(img, 0, 0, img.width, img.height);

//一定要放在onload函数里面，不然图像可能加载不出来

};

/script>/html>

canvas初级教学

常见图形绘制

var canvas_element = document.getElementById("demo");//获取元素

var canvas_blank = canvas_element.getContext("2d");//创建一个画狠政布

1.线条

canvas_blank.moveTo(0,0);//确定起点

canvas_blank.lineTo(200,100);//确定线条终点

canvas_blank.stroke();//开始绘制

2.圆形

canvas_blank.arc(50,100,30,0,2*Math.PI);

//50表示圆心x坐标

//100表示圆心y坐标

//30表示半径

//0表示起始弧度

//2*Math.PI终止弧度

canvas_blank.stroke();

3..矩形

canvas_blank.rect(20,0,100,100);//参数分别表示（x,y,width,height）

canvas_blank.stroke();

canvas初级教学

3此文章未经许可获取自百度经验

1.绘制心形动画

!DOCTYPE>html>body>canvas id="demo">/canvas>script>

var canvas_element = document.getElementById("demo");//获取元素

var canvas_blank = canvas_element.getContext("2d");//创建一个画布

canvas_element.width=800;//设置canvas的宽高

canvas_element.height=800;

canvas_blank.strokeStyle = "red";//设置线条颜色

canvas_blank.lineWidth = 2;//设置线条宽度

function calcualte_heart_position(size, dx, dy) {//定义心形的途经坐标;

//size:大小;x:所在位置;y:所在位置,相对于坐标原点;

var i,x,y;var list_arr = [];

for (i = 0; i = 6.29; i = 0.04) {//i的取值为一个完整周期（0,2π）

x = size*16*(Math.sin(i)*Math.sin(i)*Math.sin(i)) dx;

//计算心形坐标，方法有很多，不唯一

y = -size*(13*Math.cos(i)-5*Math.cos(2*i)-2*Math.cos(3*i)-

Math.cos(4*i)) dy;

list_arr.push({current_x: x,current_y: y})}return list_arr;}

var array_paint = [];var j = 0;var timer = null;var list = [];

list = calcualte_heart_position(2, 60, 40);

timer = setInterval(//设置定时器，前面是函数，后面是每隔多少秒执行一次

function(){if (j list.length - 1) {

array_paint.push([list[j].current_x * 500 / 100,

list[j].current_y * 500 / 100]);

canvas_blank.beginPath();

canvas_blank.moveTo(array_paint[0][0], array_paint[0][1]);

if (array_paint.length == 1)

canvas_blank.lineTo(array_paint[0][0] 1,

array_paint[0][1] 1);else {var i = 1;for (i in array_paint) {

canvas_blank.lineTo(array_paint[i][0], array_paint[i][1]);

canvas_blank.moveTo(array_paint[i][0], array_paint[i][1]);}}

canvas_blank.closePath();

canvas_blank.stroke();}

else{clearInterval(timer); } j ;}, 50);

/script>/body>/html>

canvas初级教学

注意事项

注意编写代码的逻辑
注意标点符号
尽量控制行缩进，使自己的代码简洁美观

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：如何使用多个css相邻兄弟选择器下一篇：css如何让div固定在右上角

canvas初级教学

工具/原料

方法/步骤

注意事项

热门文章

标签列表