二、Vue2下安装与引用

1. npm 安装

npm install vue-konva@2 konva --save
2. 引用
 
在main.js中 
import VueKonva from 'vue-konva';
Vue.use(VueKonva);
3. 使用
 
<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>
js设置: 
<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
</script>
三、基本图形
 
1. 常用属性
 
3.1.1 config 配置属性
 
width： 宽
height： 高
x/y：坐标
fill：填充颜色
draggable：是否可以拖动 
2. 文本
 
    <v-stage ref="stage" :config="stageSize">
       <v-layer>
           <v-text :config="{text: 'Some text on canvas', fontSize: 15}"/>
	   <v-layer>
	</v-stage>
</div>
3. 正方形
 
 <v-rect :config="{
          x: 20,
          y: 50,
          width: 100,
          height: 100,
          fill: 'red',
          shadowBlur: 10
 <v-circle :config="{
          x: 200,
          y: 100,
          radius: 50,
          fill: 'green'
5. 线段
 
下面是画三角形，每个边带0.2弧度。
 
  <v-line :config="{
       x: 20,
       y: 200,
       points: [0, 0, 200, 0, 100, 200],
       tension: 0.2,
       closed: true,
       stroke: 'black',
       fillLinearGradientStartPoint: { x: -50, y: -50 },
       fillLinearGradientEndPoint: { x: 50, y: 50 },
       fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
     }"/>
连接与端子形状
 
		        <v-line :config="{
		           x: 100,
				   y: 100,
				   points: [5, 70, 140, 23, 200, 100, 100, 20],
				  stroke: 'red',
				  strokeWidth: 15,
				  lineCap: 'round',
				  lineJoin: 'round',
		          }"/>
		        <v-line :config="{
		           x: 100,
				   y: 100,
				   points: [5, 70, 140, 23, 200, 100, 100, 20],
				  stroke: 'red',
				  strokeWidth: 2,
				  lineCap: 'round',
				  lineJoin: 'round',
				  dash: [33, 10],
		          }"/>
6. 椭圆
 
		        <v-ellipse :config="{
		           x: 200,
				  y: 200,
				  radiusX: 100,
				  radiusY: 50,
				  fill: 'yellow',
				  stroke: 'black',
				  strokeWidth: 4,
		          }"/>
7. 楔形
 
		        <v-wedge :config="{
		           x: 200,
				   y: 200,
				   radius: 70,
					angle: 60,
					fill: 'red',
					stroke: 'black',
					strokeWidth: 4,
					rotation: -120,
		          }"/>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                    vue-whiteboard 是一个基于Vue.js的轻量级画板组件库。GitHub仓库: https://github.com/craynic/vue-whiteboard。
                                    下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。
1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像appendChild那样插入canvas对象。
2、项目架构是vue-cli的单页应用，如果在index.html入口主文件里面引入[removed][removed]；
3、这样每个组件都会加载此js，造成资源浪费。所以通过import方式，在需要的组件里面引入，但是，html2canvas 不支持import这种
两个的区别就是，用ref找到的canvas使用时需要使用canvas.value,                             而document.querySelector找到的canvas使用时不需要加.value
（3）画线（两
                                    Html2canvas是什么?
是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。
一、安装html2canvas
npm install --save html2canvas
............
                                    但我把mounted改成created的时候会报Cannot read property 'appendChild' of null"这是因为created的时候，Dom节点还没有渲染出来到页面上，这个时候是找不到id=wave的DIV的。改成Vue的插件import wavePng from './wave.png'export default {install(Vue){Vue.directi...
                                    最近项目中用到Vue Konva框架，遇到一些问题基本搜不到，网上的文章基本都是些入门教程什么的。所以本文整理了使用过程中遇到的问题以及解决办法，希望你用到的时候有所帮助。
基本是按照我在开发中使用的顺序来写的，使用方法和错误处理没有做单独区分。如有需要可以搜索关键字。
2018.8.25
需求：类似美图秀秀网页版的拼图工具。但是美图秀秀用的是 Flash，我们用 canvas，所以能参...