示例源代码(共73行)
<template><div class="container"><div class="top"><h3>canvas绘制圆弧、圆形</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi "><canvas id="dajianshi" width="800" height="400" ></canvas></div></div></template><script>export default {data() {return {}},mounted() {this.getdata()},methods: {getdata() {var canvas = document.getElementById('dajianshi');if (!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.strokeStyle = "#f00"ctx.beginPath();ctx.arc(200,200,100,0 * Math.PI /180,90 * Math.PI /180 );ctx.stroke();ctx.strokeStyle = "#0f0"ctx.beginPath();ctx.arc(600,200,100,0,2 * Math.PI );ctx.stroke();},}}</script><style scoped>.container {width: 1000px;height: 600px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: darkorange;color: #fff;}.dajianshi {margin: 50px auto 0;width: 800px;height: 400px;background:#f6f6f6;}</style>
canvas基本属性
属性 | 属性 | 属性 |
---|
canvas | fillStyle | filter |
font | globalAlpha | globalCompositeOperation |
height | lineCap | lineDashOffset |
lineJoin | lineWidth | miterLimit |
shadowBlur | shadowColor | shadowOffsetX |
shadowOffsetY | strokeStyle | textAlign |
textBaseline | width | |
canvas基础方法
方法 | 方法 | 方法 |
---|
arc() | arcTo() | addColorStop() |
beginPath() | bezierCurveTo() | clearRect() |
clip() | close() | closePath() |
createImageData() | createLinearGradient() | createPattern() |
createRadialGradient() | drawFocusIfNeeded() | drawImage() |
ellipse() | fill() | fillRect() |
fillText() | getImageData() | getLineDash() |
isPointInPath() | isPointInStroke() | lineTo() |
measureText() | moveTo() | putImageData() |
quadraticCurveTo() | rect() | restore() |
rotate() | save() | scale() |
setLineDash() | setTransform() | stroke() |
strokeRect() | strokeText() | transform() |
translate() | | |