<template> <div style="width: 100%;height: 100%"> <div class="contentcenter"> <canvas width="600" height="600" id="mycanvas" style="border: 1px solid black"></canvas> </div> </div> </template> <script> export default { name: "index", methods: { initview() { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext("2d"); /* 概念 1、画布坐标轴与传统数学坐标轴,关于X轴对称。意味着:X轴正常,Y轴相反,弧度相反 */ /* 矩形 // 填充色 ctx.fillStyle = "rgb(255,0,0)"; // 填充矩形选区(起点X轴坐标,起点Y轴坐标,矩形宽度,矩形高度) ctx.fillRect(600, 600, -300, -300); // 笔划色 ctx.strokeStyle = "rgb(0,255,0)"; // 笔划矩形选区(起点X轴坐标,起点Y轴坐标,矩形宽度,矩形高度) ctx.strokeRect(600, 300, -300, -300); // 清除矩形选区(起点X轴坐标,起点Y轴坐标,矩形宽度,矩形高度) ctx.clearRect(375, 375, 150, 150); */ /* 三角形 // 开启路径 ctx.beginPath(); // 至坐标 ctx.moveTo(150, 150); // 直线至坐标 ctx.lineTo(450, 450); ctx.lineTo(450, 150); // 闭合路径 ctx.closePath(); ctx.fillStyle = "rgb(255,0,0)"; // 填充 ctx.fill(); ctx.strokeStyle = "rgb(0,255,0)"; // 笔划 ctx.stroke(); */ /* 圆弧 // 开启路径 ctx.beginPath(); // 圆弧(圆心X轴坐标,圆心Y轴坐标,半径,起始弧度,结束弧度,是否逆时针) ctx.arc(300, 300, 300, 0, -Math.PI / 2, true); // 笔划 ctx.stroke(); */ /* 贝塞尔曲线 // 开启路径 ctx.beginPath() // 至坐标 ctx.moveTo(0, 300) // 直线至坐标 ctx.lineTo(150, 300) // 贝塞尔曲线(参数1、2控制点1坐标,参数3、4控制点2坐标,...) ctx.quadraticCurveTo(300, 300, 300, 450) ctx.lineTo(300, 600) // 笔划 ctx.stroke() */ /* 直线 ctx.beginPath() ctx.moveTo(150, 300) ctx.lineTo(300, 300) ctx.lineTo(300, 450) // 线宽 ctx.lineWidth = 10 // 端点样式 var lineCap_valarr = ["butt", "round", "square"] ctx.lineCap = lineCap_valarr[1] // 拐点样式 var lineJoin_valarr = ["round", "bevel", "miter"] ctx.lineJoin = lineJoin_valarr[1] // 虚线([实线长度,虚线长度]) ctx.setLineDash([0, 10]) ctx.stroke() */ /* 文本 ctx.beginPath() ctx.moveTo(0, 150) ctx.lineTo(600, 150) ctx.moveTo(200, 0) ctx.lineTo(200, 600) ctx.moveTo(0, 450) ctx.lineTo(600, 450) ctx.stroke() // 字体样式 ctx.font = "bolder 32px 微软雅黑" // 字体左右对齐方式 var textAlign_valarr = ["left", "center", "right"] ctx.textAlign = textAlign_valarr[0] // 字体上下对齐方式 var textBaseline_valarr = ["top", "middle", "bottom", "hanging", "alphabetic"] ctx.textBaseline = textBaseline_valarr[3] // 填充文本(文本内容,文本X轴坐标,文本Y轴坐标) ctx.fillText("宁静致远", 200, 150) // 笔划文本(文本内容,文本X轴坐标,文本Y轴坐标) ctx.strokeText("淡泊明志", 200, 450) */ /* 图片 var img = new Image(); img.src = require("../static/tly.jpg"); img.onload = function () { // 画图(图片对象,图片起始X轴坐标,图片起始Y轴坐标) ctx.drawImage(img, 0, 0); // 画图(图片对象,图片起始X轴坐标,图片起始Y轴坐标,图片缩放宽度,图片缩放高度) ctx.drawImage(img, 0, 0, 300, 300); // 画图(图片对象,原图裁剪起始X轴坐标,原图裁剪起始Y轴坐标,原图裁剪宽度,原图裁剪高度,裁剪图起始X轴坐标,裁剪图起始Y轴坐标,裁剪图缩放宽度,裁剪图缩放高度) ctx.drawImage(img, 0, 0, 300, 300, 300, 0, 300, 300); } */ } }, mounted() { this.initview() } } </script> <style scoped> .contentcenter { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } </style>
canvas基础第一节
猜你喜欢
转载自www.cnblogs.com/linding/p/13397309.html
今日推荐
周排行