zoukankan      html  css  js  c++  java
  • canvas入门

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签,

    1 <canvas id="myCanvas"></canvas>                   

    接着需要给canvas赋值高度和宽度。

    1 var canvas = document.getElementById("myCanvas");     
    2 canvas.width =400;                   
    3 canvas.height =400;          //canvas会覆盖页面的一个区域,同时也会阻止这个区域事件发生,所以在处理canvas区域的时候要慎重处理。
    //canvas对象的颜色和阴影透明度属性,模块。

    2.阴影处理API

    context.shadowColor = 'rgba(50, 50, 50, 1.0)'; 
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur = 10;
    context.lineWith = 10;当前线条的宽度,以像素计。
    //获得画布的像素,ImageData对象,三个Api,
    context.createImageData
    context.getImageData
    context.setImageData

    3.画圆

    var ctx = canvas.getContext("2d");      //返回CanvasRenderingContext2D 对象,canvas画图是通过这个对象来画的。
    //开始一个新的绘制路径
    ctx.beginPath();                        
    //设置弧线的颜色为蓝色
    ctx.strokeStyle = "blue";
    //沿着坐标点(100,100)为圆心
    ctx.arc(circle.x, circle.y, circle.r,0,2*Math.PI,true);   画圆6个参数,圆心坐标、半径、起始和终止的角度。最后一个规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针
    ctx.closePath();
    ctx.fillStyle = 'rgb(200,0,200)';
    ctx.fill();
  • 相关阅读:
    137. 只出现一次的数字 II
    JS_利用Canvas进行图片旋转
    JS_图片压缩并预览
    计蒜客——等和的分隔子集
    中缀表达式转后缀并计算(只考虑个位整数,不考虑除0等情况)
    求最小数 * 区间和最大值
    967 质量检测
    PAT-1102(Invert a Binary Tree)
    PAT-1100(Mars Numbers)
    PAT-1099(Build A Binary Search Tree)
  • 原文地址:https://www.cnblogs.com/liuyinlei/p/4916571.html
Copyright © 2011-2022 走看看