plunkerでvue その61

概要

plunkerでvueやってみた。
練習問題、やってみた。

練習問題

vueファイルでsin波を書け。

写真

サンプルコード

<template>
  <div>
    <h2>sin波</h2>
    <canvas id="canvas" ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
define(['Vue'], function(Vue) {
  return new Vue({
    template: template,
    data() {
	    return {
	      canvas: null,
	      context: null,
	      px: 20,
				data: []
	    }
    },
    created() {
		}, 
    mounted() {
	    this.canvas = this.$refs.canvas;
	    this.context = this.canvas.getContext("2d");
			this.draw2();
		},
		watch: {
		},
		methods: {
			draw2() {				
				let ctx = this.context.canvas.getContext("2d");
				for (var i = 0; i < 400; i++)
				{
					var x = i / 30.0;
					var y = Math.sin(x);
					this.data.push(y);
				}
				var hc = 100 + 100;
				ctx.strokeStyle = "#f00";
				ctx.lineWidth = 5;
				ctx.moveTo(0, hc);
				for (var i = 1; i < 400; i++)
				{
					ctx.lineTo(i, hc - this.data[i] * 70);
				}
				ctx.stroke();
			}
    }
  });
});
</script>

<style>
</style>

成果物

以上。