加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

JavaScript用canvas画画的操作是哪些

发布时间:2023-06-15 13:50:47 所属栏目:语言 来源:
导读:今天这篇给大家分享的知识是“JavaScript用canvas画画的操作是什么”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“JavaScript用canvas画画的操作是什么

今天这篇给大家分享的知识是“JavaScript用canvas画画的操作是什么”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“JavaScript用canvas画画的操作是什么”文章能帮助大家解决问题。

canvas是HTML的一个绘图标签,与SVG用标签绘图不同,canvas是通过Js代码进行图形绘制,多用于移动端分享海报绘制以及照片裁剪等场景。本文将结合部分canvas API介绍在Vue项目中如何使用canvas进行简单的图形绘制和图片绘制。

第一部分:图形绘制

画画第一步:准备好画布和画笔

<templete>

<div>

<canvas id="my-canvas" width="400" height="400">

//注意:给canvas设置宽高是不用带单位的,以像素为单位

</div>

</templete>

<script>

export default {

mounted() {//注意要在DOM元素渲染完后才能操作DOM

this.draw();

},

methods: {

draw() {

let canvas = document.getElementById('my-canvas');//获取画布

let ctx = canvas.getContext('2d');//获取画笔

//之后的操作都是基于ctx

}

</script>

画画第二步:给画笔调个粗细

ctx.fill();//用粗的毛笔填充

ctx.stroke();//用细的铅笔描边

画画第三步:给画笔沾点颜料

ctx.fillStyle = 'red'

ctx.strokrStyle = 'blue'

画画第四步:描点画图

为了更好理解,把第二三步置前,实际绘制需先描点,最后选择呈现颜色和方式

描点多借助(x,y)坐标实现,而坐标原点是canvas的左顶点,向右和向下方向分别为x轴和y轴的正方向

(1)画一个三角形

先描3个点,然后把点连接起来就完事!

ctx.beginPath();//新建一条绘制路径

ctx.moveTo(10, 10);//起点

ctx.lineTo(60, 10);//向x轴延申10个像素

ctx.lineTo(60, 60);//向y轴延申10个像素

ctx.closePath();//关闭当前路径

ctx.strokeStyle = 'red';//设置画笔颜色

ctx.stroke();//以描边的方式把描点的位置链接起来

//填充方式画三角形

//ctx.fillStyle = 'blue';//设置颜色

//ctx.fill();//以填充的方式把描点的位置链接起来

(2)画一个矩形

如何快速画出一个矩形?先绘制4个点吗?大漏特漏!!!canvas API里直接就有画矩形的方法!一步到位,无需其他操作!

fillRect(x,y,width,height);//填充一个矩形

strokeRect(x,y,width,height);//描边一个矩形

//参数x,y是起点

//例子

ctx.fillRect(10,10,50,50);//填充一个矩形

ctx.strokeRect(70,10,50,50);//描边一个矩形

//默认颜色为黑色,可通过fillStyle/strokeStyle改颜色

(3)画一个圆

arc(x, y, r, startAngle, endAngle, direction)

//x,y为圆心,r为半径,startAngle、endAngle分别代表开始角度和结束角度,direction代表方向,true为顺时针,false为逆时针,不填默认为true

//例子

ctx.arc(100,100,20,0,2*Math.PI);

ctx.stroke();//以描边方式将点连接起来

(4)进阶:画一个笑脸

ctx.beginPath();

ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);

ctx.moveTo(135, 100);//重新设置画笔起点

ctx.arc(100, 100, 35, 0, Math.PI, false);

ctx.moveTo(90, 85);

ctx.arc(85, 85, 5, 0, 2 * Math.PI, true);

ctx.moveTo(120, 85);

ctx.arc(115, 85, 5, 0, 2 * Math.PI, true);

ctx.stroke();

画画第五步:署名

如何在canvas画布上写字呢?

fillText('文本',x,y,maxWidth);//x,y为文本绘制开始位置,maxWidth为最大宽度(可选参数)

strokeText('文本',x,y,maxWidth);

font ='';//设置字体大小和字体样式

//例子

ctx.font = '32px serif'

ctx.fillText('任嘉伦最帅',10,50)

ctx.strokeText('任国超也帅',10,100)

第二部分:图片绘制

场景一:页面中现有一张图,需要你在canvas画布上绘制出一张一模一样的图

ctx.drawImage(image, x, y,width,height)//image可以是img元素或Image构造函数创建的屏幕外图片对象,x,y为绘制的起始位置

//场景一

<template>

<div class="wrap-box">

<div class="canvas-content">

<canvas id="my-canvas" width="300" height="300"></canvas>

</div>

<div class="img-content">

<img src="../../assets/rjl.jpg" alt="" class="my-img">

</div>

</div>

</template>

<script>

export default {

mounted(){

this.drawPic()

},

methods:{

drawPic(){

//场景一

let canvas = document.getElementById("my-canvas");

let ctx = canvas.getContext('2d');

let img = document.querySelector('.my-img');

img.onload=function(){//为确保图片资源加载完毕,需要在onload方法里绘制

ctx.drawImage(img,0,0,200,300);

}

}

}

}

</script>

<style scoped>

.wrap-box{

display: flex;

align-items: center;

padding:20px 0 0 50px;

}

#my-canvas{

border: 1px solid orange;

}

.img-content{

flex: 1;

}

.my-img{

width: 200px;

height: 300px;

}

</style>

场景二:图片不存在页面上,通过接口返回或fileReader对象获取到src路径参数,如何把src指向的图片资源绘制到canvas上?

//场景二关键代码

<script>

export default {

mounted(){

this.drawPic()

},

methods:{

drawPic(){

//场景二

let img = new Image();//创建一个Image对象

img.src="xxx.png";//假设xxx.png是获取的scr参数

img.onload = function(){//切记要在onload方法里绘制

ctx.drawImage(img,150,100,200,300);

}

}

}

}

</script>

以上就是关于“JavaScript用canvas画画的操作是什么”的介绍了,感谢各位的阅读,希望这篇文章能帮助大家解决问题。

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!