入门canvas(通俗易懂)

Canvas的基本用法

HTML5元素canvas

一、基本用法

HTML

< canvas id=“tutorial” width=“300” height=“150”>

JavaScript

var canvas = document.getElementById('tutorial')
var ctx =canvas.getContext('2d')
//获得渲染上下文和他的绘画功能

通常我们需要判断浏览器是否支持canvas,如下:

window.onload(function(){
            var canvas = document.getElementById('tutorial')
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d')
            }
        })

二、绘制图形

绘制一条从(100,100)到(700,700)的线

在从(700,700)到(100,700)的线

在从(100,700)到 (100,100)的线

在从 (100,100)到(400,700)的线

常用api

  • moveTo():开始坐标
  • lineTo():终点坐标
  • fillStyle:填充图形的颜色
  • fill():填充颜色块
  • lineWidth:线的粗细
  • strokeStyle:线的颜色
  • stroke:绘制
  • beginPath():起始路径
  • closePath():结束路径

一条路径实现图案

HTML

<canvas id="canvas"></canvas>

css

canvas {
            border: 1px solid black;
        }

javascript

<script>
        function draw(){
            // 获取元素
            var canvas = document.getElementById('canvas')
                // 判断该浏览器是否兼容
                if (canvas.getContext) {
                    canvas.width = 1024
                    canvas.height = 800
                    // 使用2d渲染上下文
                    var ctx = canvas.getContext('2d')

                    ctx.moveTo(100,100) //起点坐标
                    ctx.lineTo(700,700) //终点坐标
                    ctx.lineTo(100,700)
                    ctx.lineTo(100,100)
                    ctx.lineTo(400,700)

                    ctx.lineWidth = 5 //线的粗细
                    ctx.strokeStyle = 'red' //线的颜色
                    ctx.stroke() //绘制
            }
        }
        draw()
    </script>

运行效果:

多条路径实现图案

canvas的绘制是基于状态的

使用两条不同的路径时,调用第二次stroke()方法时,第二次的效果会覆盖第一次的效果

为了避免这种情况,我们要使用两个api

  • beginPath() 从此时起,声明的一条路径
  • closePath() 关闭这条路径

注意:

当使用了开始路径跟关闭路径时,会把线段首尾连接起来

只声明开始路径时,不会将线段首尾连接

var ctx = canvas.getContext('2d')
                    ctx.beginPath()
                    ctx.moveTo(100,100) //起点坐标
                    ctx.lineTo(700,700) //终点坐标
                    ctx.lineTo(100,700)
                    ctx.lineTo(100,100)
                    ctx.lineTo(400,700)
                    ctx.closePath()
                    ctx.fillStyle = 'rgb(2,100,39)'
                    ctx.fill()

                    ctx.lineWidth = 5 //线的粗细
                    ctx.strokeStyle = 'red' //线的颜色
                    ctx.stroke() //绘制
                    

                    ctx.beginPath()
                    ctx.moveTo(200,100)
                    ctx.lineTo(700,600)
                    ctx.closePath()
                    ctx.strokeStyle = 'black'
                    ctx.stroke()
                    

二、arc方法

绘制弧线方法arc

context.arc()

参数:

  • centerx,centery,radius,弧线的圆心跟半径
  • startingAngle,endingAngle, 从哪个弧度值开始结束于哪个弧度值
  • anticlockwise = false 可选,默认顺时针方式绘制图线
<script>
        window.onload = function () {
            var canvas = document.getElementById('canvas')
            // 设置画布的宽高
            canvas.width = 800
            canvas.height = 800
            // 如果浏览器兼容canvas
            if (canvas.getContext) {
                // 调用canvas里的getContext方法
                var context = canvas.getContext('2d')
                context.lineWidth = 3
                context.strokeStyle = '#005588'

                
                context.beginPath()
                context.arc(
                    50 , 50, 30, 30, 0, 2 * Math.PI
                )
                context.fillStyle = '#005588'
                context.fill()
                context.stroke()
                

                for (var i = 0; i < 10; i++) {
                    context.beginPath()
                    context.arc(
                        50 + i * 100, 160, 40, 0, 2 * Math.PI * (i + 1) / 10, true)
                    context.stroke()
                }

                context.fillStyle = '#005588'
                for (var i = 0; i < 10; i++) {
                    context.beginPath();
                    context.arc(
                        50 + i * 100, 280, 40, 0, 2 * Math.PI *(i + 1) / 10, true);
                    context.fill()
                    context.stroke()
                }
            }
        }
    </script>
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值