Canvas的基础操作

崔先森呀

已于 2022-11-18 10:41:24 修改

阅读量240

点赞数

文章标签： javascript css css3 html5

于 2021-05-12 22:45:36 首次发布

本文链接：https://blog.csdn.net/qq_36344077/article/details/116720798

版权

一、Canvas

1.1、canvas文本

ctx.font="24px 隶书";			// 规定字号和字体 且必须写在绘制字体之前
ctx.strokeStyle="red";			// 规定描边颜色 必须在绘制之前定义
ctx.fillStyle="red";			// 规定字体颜色 必须在绘制之前定义
ctx.textAlign = "left";			// 规定水平对齐方向 可选值：（start, end, left, right or center.）
ctx.textBaseline = "top";		// 规定垂直对齐方向 可选值：（top, hanging, middle, alphabetic, ideographic, bottom。）
ctx.direction = "ltr";			// 规定字体方向 可选值：（ltr, rtl, inherit）
ctx.fillText("abcdefg", 0, 0);	// ctx.fillText(text, x, y [, maxWidth]);
								//         显示的文字 显示的坐标 规定显示的宽度（可选）
ctx.strokeText("abcdefg",0,0);	// 绘制文字描边，若只有strokeText没有fillText则显示空心字

var text = ctx.measureText("abcdefg"); // 可获取字体的属性，宽度，所在像素位置等
console.log(text);
console.log(text.width);

1.2、canvas图片

canvas获取图片的方式有四种：
new Image
video视频截图
另一个canvas截图
ImageBitmap位图

//canvas准备工作
var canvas1=document.querySelector(".canvas1");
var canvas2=document.querySelector(".canvas2");
var ctx1=canvas1.getContext("2d");
var ctx2=canvas2.getContext("2d");

//第一种：通过Img图像源完成绘制
var img=new Image();
img.src="./img/19-.jpg";
img.addEventListener("load",loadHandler);
canvas1.addEventListener("click",clickHandler);

function clickHandler(e){
	var imgData=ctx1.getImageData(0,0,536,480);
    console.log(e.offsetX,e.offsetY);
    var pos=(e.offsetY-1)*536*4;
    pos+=e.offsetX*4;
    var colors="rgba("+imgData.data.slice(pos,pos+4).join(",")+")";
    ctx2.fillStyle=colors;
    ctx2.fillRect(0,0,canvas2.width,canvas2.height);
}

function loadHandler(e){
	ctx1.drawImage(img,0,0);
}

//第二种：通过视频源绘制
var video=document.querySelector("video");
video.addEventListener("click",clickHandler);

function clickHandler(e){
	ctx.drawImage(video,0,0);
}
/***视频抠图******************************************/
var video=document.querySelector("video");
var bool=false;
video.addEventListener("play",playHandler);
video.addEventListener("pause",playHandler);
setInterval(animation,1);

function playHandler(e){
	bool=e.type=="play";
}
function animation(){
	if(!bool) return;
    ctx1.drawImage(video,0,0);
    var imgData=ctx1.getImageData(0,0,536,480);
    for(var i=0;i<imgData.data.length;i+=4){
    	if(imgData.data[i]>150 && imgData.data[i]<175 && imgData.data[i+1]>160 && imgData.data[i+1]<190 && imgData.data[i+2]>220 && imgData.data[i+2]<240){
        	imgData.data[i+3]=0;
        }
    }
    ctx2.putImageData(imgData,0,0);
}

//canvas绘制
ctx1.fillStyle="red";
ctx1.fillRect(100,100,50,50);
ctx2.drawImage(canvas1,0,0);

1.3、canvas变形

/***入栈save 出栈restore**************************************************/
ctx.fillStyle="red";
ctx.fillRect(50,50,50,50);
ctx.save();						// 入栈（保存）
ctx.fillStyle="blue";
ctx.fillRect(150,150,50,50);
ctx.restore();					// 出栈（恢复）
ctx.fillRect(250,250,50,50);

/***平移translate********************************************/
ctx.save();
ctx.translate(50,0);			// 平移 x,y
ctx.fillRect(0,0,50,50);
ctx.restore();
ctx.fillRect(0,0,50,50);

/***旋转rotate********************************************/
var r = 0;
animation();
function animation() {
	requestAnimationFrame(animation);
    ctx.clearRect(0,0,canvas.width,canvas.height)
    r++;
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate((Math.PI / 180) * r);
    ctx.fillRect(-25, -25, 50, 50);
    ctx.restore();
}

/***缩放scale******************************************/
var img = new Image();
img.src = "./img/19-.jpg";
img.addEventListener("load", loadHandler);
function loadHandler(e) {
	ctx.save();
    ctx.translate(img.width,0);
    ctx.scale(-0.5,0.5);
    ctx.drawImage(img,0,0);
    ctx.restore();
}

1.4、canvas裁切

/***刮刮乐效果*********************************/
 var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0,0,canvas.width,canvas.height);
        
var img=new Image();
img.src="./img/21-.jpg";
img.addEventListener("load",loadHandler);
        
function loadHandler(e){
	canvas.addEventListener("mousemove",mouseHanlder);
}
        
function mouseHanlder(e){
	ctx.save();
	ctx.beginPath();
	ctx.arc(e.offsetX,e.offsetY,30,0,Math.PI/180*360);
	ctx.closePath();
	ctx.clip();
	ctx.drawImage(img,0,0);
	ctx.restore();
}

二、数据可视化echarts

echarts是商业级数据图表，是百度的一个开源的数据可视化工具，一个纯js的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

2.1、安装和引入echarts

npm i echarts
<script src="./node_modules/echarts/dist/echarts.js"></script>

2.2、使用

<style>
    #main{
        width:900px;
        height:600px;
    }
</style>
<div id="main"></div>
<script>
var myChart = echarts.init(document.querySelector("#main"));
var option = {
    /*要生成表格的数据内容*/
}
myChart.setOption(option);
</script>

2.2.1、柱状图

var mychart = echarts.init(main); // 指定的dom元素
var option = {
    title:{
        text:"衣服", // 图标标题
    },
    legend:{
        data:["哈哈","销量"] // 指定数据名称
    },
    xAxis:{
        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] // x坐标数据
    },
    yAxis:{},
    series:[
        {
            name:"哈哈", // 对应的数据名称
            type:"bar", // 柱状图
            data:[5,20,36,10,10,20] // 每个x坐标数据的百分比数据
        },
        {
            name:"销量",
            type:"bar",
            data:[90,80,70,85,85,80]
        }
    ],
}
mychart.setOption(option); // 设置选项

/*
1. title：指的是整个图标的名称
2. legend：指的是图标的分类
3. xAxis：指的是x轴的类目
4. yAxis：指的是y轴的数据 
5. series：指的是具体数据 
*/

2.2.2、饼状图

var mychart = echarts.init(main);
var option = {
    title:{
        text:"衣服",
    },
    series:{
        type:"pie", // 表示类型是饼状图
        center:[200,'30%'], // 饼状图中心坐标
        radius:100, // 饼状图直径
        data:[
            {
                name:"衬衫", // 图标数据名称
                value:500 // 图标数据值
            },
            {
                name:"鞋子",
                value:600
            },
            {
                name:"袜子",
                value:800
            }
        ],
    }
}
mychart.setOption(option);

/*
series：	center：圆心坐标，可以是数字，可以是百分比
			radius：饼状图半径
			data：饼状图数据
			name：饼状图的数据名称
			value：饼状图的具体数据
*/

2.2.3、折线图

var mychart = echarts.init(main);
var option = {
    title:{
        text:"衣服",
    },
    legend:{
        data:["哈哈","销量"]
    },
    xAxis:{
        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis:{},
    series:[
        {
            name:"哈哈",
            type:"line",
            data:[20,30,40,50,60,20]
        },
        {
            name:"销量",
            type:"line",
            data:[90,80,70,60,50,90]
        }
    ]
}
mychart.setOption(option);

三、拖拽

<div class="div1"></div>
<div class="div2"></div>
<img src="./img/19-.jpg" draggable="true" id="img1">
<img src="./img/20-.jpg" draggable="true" id="img2">
<img src="./img/21-.jpg" draggable="true" id="img3">
/*为了使元素可拖动，把 draggable 属性设置为 true ：*/

var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
var imgs=document.querySelectorAll("img");

/*给要拖拽的元素增加dragstart事件*/
imgs.forEach(item=>item.addEventListener("dragstart",dragStartHandler))

/*给拖拽到的目标容器增加dragover事件，并且取消默认事件*/
div1.addEventListener("dragover",dragoverHandler);
div2.addEventListener("dragover",dragoverHandler);
/*给拖拽到目标容器增加drop事件*/
div1.addEventListener("drop",dropHandler);
div2.addEventListener("drop",dropHandler);
function dragStartHandler(e){
	e.dataTransfer.setData("text",e.currentTarget.id);
}
function dragoverHandler(e){
	//console.log(e);
    e.preventDefault();
}
function dropHandler(e){
	var id=e.dataTransfer.getData("text");
/*增加到目标容器中*/
    e.currentTarget.appendChild(document.querySelector("#"+id));
}

四、全屏操作

document.addEventListener("click",clickhandler);
/*退出全屏*/
document.exitFullscreen();
function clickhandler(){
/*进入全屏*/
	document.documentElement.requestFullscreen();
}

五、多线程

// work.js
var s=0;
for(var i=0;i<1000000000;i++){
    s+=i;
}
postMessage("loadfinsh:"+s);

var work=new Worker("./work.js");
work.addEventListener("message",messageHandler);
var n=0;
setInterval(function(){
	n++;
	console.log(n)
},300);
function messageHandler(e){
	console.log(e.data)
}

崔先森呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas的基础操作

一、Canvas1.1、canvas文本ctx.font="24px 隶书"; // 规定字号和字体且必须写在绘制字体之前ctx.strokeStyle="red"; // 规定描边颜色必须在绘制之前定义ctx.fillStyle="red"; // 规定字体颜色必须在绘制之前定义ctx.textAlign = "left"; // 规定水平对齐方向可选值：（start, end, left, right or center.）ctx.textBaseline = "to
复制链接

扫一扫