zoukankan      html  css  js  c++  java
  • HTML5 Canvas(1) 绘制基本图形和线条

            window.onload = function () {
                //得到2D渲染上下文
                var context = document.getElementById("myCanvas").getContext("2d");
                //填充一个矩形
                var x = 40, y = 40;
                context.fillStyle = "blue"; //设置填充色
                context.fillRect(x + 5, y + 5, 40, 90);
    
                //绘制一个矩形边框
                context.strokeStyle = "red"; //设置画笔色
                context.strokeRect(x, y, 50, 100);
    
    
                context.beginPath(); //beginPath1
                context.moveTo(10, 10);
                context.lineTo(150, 50);
                context.lineTo(140, 33);
                context.strokeStyle = "green";
                context.stroke();
    
                context.beginPath(); //beginPath2
                context.moveTo(22, 22);
                context.lineTo(10, 50);
                context.lineTo(30, 100);
                context.closePath(); //closePath可以让线条闭合
             context.strokeStyle = "#0000FF";
    
                context.fill();//填充线条轮廓区域
    
            };

    beginPath的作用是开辟新的绘图路径,不会影响其他路径,如把beginPath2注释掉后,运行会出现2个封闭被#0000FF填充的三角形,即使在beginPath1中使用stroke画出了线条,也会被重绘。

    所以一般要画和之前的线条不一样的设置时首先要用beginPath开辟新绘图路径再继续画,才不会影响先前的绘图

  • 相关阅读:
    angular入门--绑定字符串
    mongodb安装与mongo vue的使用
    css3-pointer-events_demo
    面向对象的六大原则
    AutoMapper简明教程(学习笔记)
    jquery cookie的用法
    MVC 异常处理机制
    查询最近修改的脚本
    运行page页面时的事件执行顺序
    游标简单的使用
  • 原文地址:https://www.cnblogs.com/FlyCat/p/2579262.html
Copyright © 2011-2022 走看看