canvas绘制图形

最新推荐文章于 2024-01-15 11:50:28 发布

uncle_Huang

最新推荐文章于 2024-01-15 11:50:28 发布

阅读量303

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/uncle_Huang/article/details/95629536

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

canvas绘制图形

简单了解canvas

创建一个canvas画布
引入绘画脚本
使用draw函数进行绘画

index.html


<html>
  <head lang="en">
    <meta charset="utf-8"/>
	<title>canvas绘制矩形</title>
	<script type="text/javascript" src="canvas.js"></script>//引入绘画脚本
	<style type="text/css">
	    body{
		   margin:0;
		   padding:0;
		}
	</style>
  </head>
  <body onload="draw('canvas')">//使用draw函数进行绘画
    <canvas id="canvas" width="400" height="300"></canvas>//创建画布
  </body>
</html>

绘制矩形

效果图如下：在这里插入图片描述

获取canvas元素
document.getElementById()；
取得上下文
canvas.getContext(‘2d’);
填充与绘画边框
设置绘制样式
context. fillStyle，context.strokeStyle
指定画笔宽度
context.lineWidth
设置颜色值
绘制矩形
context.fillRect（x，y，width，height);
context.fillRect（x，y，width，height);

canvas.js

function draw(id){
	var canvas = document.getElementById(id);//获取canvas元素
	var context = canvas.getContext('2d');//取得上下文
	context.fillStyle = "blue";//填充样式
	context.strokeStyle = "red";//边框样式
	context.lineWidth = 5;//画笔宽度
	context.fillRect(0,0,400,300);//填充context.fillRect（x，y，width，height）
	context.strokeRect(50,50,180,120);//边框
}

绘制圆形

效果图：
在这里插入图片描述

开始创建路径
context.beginPath();
创建圆形路径
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
startAngle开始角度,endAngle结束角度,anticlockwise是否按顺时针方向绘制
角度换成弧度方法：
var radius = degree*Math.PI/180;
其中Math.PI为180°
创建完成关闭路径
context.closepath();
设置绘制样式然后调用绘制方法进行绘制
context.fillSyle=‘rgba(255,0,0,0.25)’;
context.fill();

intex.html


<html>
  <head lang="en">
    <meta charset="utf-8"/>
	<title>canvas绘制圆形</title>
	<script type="text/javascript" src="canvas.js"></script>
	<style type="text/css">
	    body{
		   margin:0;
		   padding:0;
		}
	</style>
  </head>
  <body onload="draw('canvas')">
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
</html>

canvas.js

function draw(id){
	var canvas = document.getElementById(id);
	var context = canvas.getContext('2d');
	context.fillStyle = "yellow";
	context.fillRect(0,0,400,400);
	for(var i=0;i<10;i++){
		context.beginPath();
		context.arc(i*25,i*26,i*10,0,Math.PI*2,true);
		context.closePath();
		context.fillStyle = "rgba(255,0,0,0.25)";
		context.fill();
	}
}

绘制文字

效果图：
在这里插入图片描述
fillText方法用填充的方式绘制字符串：
context.fillText(text,x,y,[maxwidth]);
strokeText方法用轮廓的方法绘制字符串：
stroke.fillText(text,x,y,[maxwidth]);

设置文字字体
context.font=“font-size font-family”;
设置文字垂直对齐方式
context.textBaseline=‘alphabetic’;
设置文字水平对齐方式
context.textAlign=‘start’;

canvas.js

function draw(id) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.fillStyle = "#CA0C16";
    context.fillRect(0,0,800,300);
    context.font="40px 微软雅黑";
    context.fillStyle = 'white';
    context.textBaseline ='hanging';
    context.textAlign ='start';
    context.fillText('欢迎观看',150,20);
    context.fillText('uncle_huang',190,80);
    context.fillText('CSDN博客',400,150);
}

保存文件

canvas.toDataURL(type);`

window.location - canvas.toDataURL('image/png');

绘制动画

效果图：
在这里插入图片描述
设置动画的间隔时间：
setInterval(code,millisec);

canvas.js

var i;
var context;
function draw(id) {
    var canvas = document.getElementById(id);
    context = canvas.getContext("2d");

    setInterval(painting,100);
    i=0;
}

function painting() {
    context.fillStyle = "#CA0C16";
    context.fillRect(i,0,10 ,10);
    i+=20;
}

擦除图像的方法：
context.clearRect(x,y,width,height);

canvas.js


var i;
var context;
var width,height;
function draw(id) {
    var canvas = document.getElementById(id);
    context = canvas.getContext("2d");
    width=canvas.width;
    height=canvas.height;

    setInterval(painting,100);
    i=0;
}

function painting() {
    context.fillStyle = "white";
    context.clearRect(0,0,width,height)
    context.fillStyle = "#CA0C16";
    context.fillRect(i,20,10,10)
    i+=20;
}

uncle_Huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas绘制图形

canvas绘制图形简单了解canvas创建一个canvas画布引入绘画脚本使用draw函数进行绘画html<html> <head lang="en"> <meta charset="utf-8"/> <title>canvas绘制矩形</title> <script type="text/jav...
复制链接

扫一扫