html5 canvas 书,HTML5 canvas

绘制圆形

function draw(id){

let canvas = document.getElementById(id)

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

context.fillStyle = "#eeeeef"

context.fillRect(0,0,600,700)

//为什么是i<10?因为要画10个圆

for(let i = 0;i<=10;i++){

//1.开始创建路径

context.beginPath();

//2.图形路径

//(圆心x轴坐标，圆心y轴坐标，半径，根据pi(3.1415926)来绘制，true)

context.arc(i*25,i*25,i*10,0,Math.PI*2,true);

//3.关闭路径

context.closePath();

//(前三个为三原色，透明度)

context.fillStyle = "rgba(255,0,0,0.25)";

//4.调用绘制方法

context.fill()

}

}

moveTo与lineTo

function draw(id){

let canvas = document.getElementById(id)

let context = canvas.getContext("2d")

context.fillStyle = "#eeeeef"

context.fillRect(0,0,300,400)

let dx=150,dy=150,s=100

context.beginPath()

context.fillStyle = "rgb(100,255,100)"

//图形边框的样式

context.strokeStyle = "rgb(0,0,100)"

let x = Math.sin(0),y = Math.cos(0)

let dig = Math.PI / 15*11

for (let i=0;i<30;i++){

let x = Math.sin(i*dig)

let y = Math.cos(i*dig)

//lineTo绘制直线

context.lineTo(dx+x*s,dy+y*s)

}

context.closePath()

context.stroke()

}

BezierCurveTo贝塞尔曲线

function draw(id){

let canvas = document.getElementById(id)

if (canvas==null){

return false;

}

let context = canvas.getContext("2d")

context.fillStyle = "rgb(238,233,233)"

context.fillRect(0,0,300,400)

let dx=130,dy=150,s=100

context.beginPath()

context.fillStyle = "rgb(255,228,225)"

let x = Math.sin(0),y = Math.cos(0)

let dig = Math.PI / 15*11

context.moveTo(dx,dy)

context.strokeStyle = "rgb(205,145,158)"

for (let i=0;i<30;i++){

let x = Math.sin(i*dig)

let y = Math.cos(i*dig)

//绘制贝塞尔曲线

context.bezierCurveTo(dx+x*s,dy+y*s-100,dy+x*s+100,dy+y*s,dx+x*s,dy+y*s)

}

context.closePath()

context.fill()

context.stroke()

}

绘制渐变图形

function draw(id){

let canvas = document.getElementById(id)

let context = canvas.getContext("2d")

//g1是createLinearGradient对象

// 0,0是起点坐标；0,300是终点坐标

let g1 = context.createLinearGradient(0,0,0,300)

/**addColorStop()要设置两次，分别对应起始和终点，

括号内的第一个参数，表示渐变开始和结束的位置，值在0-1之间；

第二个参数，设定三原色颜色值 **/

g1.addColorStop(0.1,"rgb(255,255,0)")

g1.addColorStop(1,"rgb(0,255,255)")

//将渐变色填充给g1

context.fillStyle = g1

//绘制图形

context.fillRect(0,0,500,500)

//创建一个颜色和大小都在变化的

let g2 = context.createLinearGradient(0,0,300,0)

g2.addColorStop(0,"rgba(0,0,255,0.5)")

g2.addColorStop(1,"rgba(255,0,0,0.5)")

for (let i=0;i<10;i++){

//绘制路径

context.beginPath()

//把渐变色填充给g2

context.fillStyle = g2

//arc()代表圆形

context.arc(i*25,i*25,i*10,0,Math.PI*2,true)

//关闭路径

context.closePath()

//结束绘制

context.fill()

}

}

绘制渐变图形,createLinearGradient(起始坐标点，结束坐标点)

addColorStop(offset,color)设定颜色，offset颜色距离起始点的偏移量

绘制径向渐变图形

function draw(id){

let canvas = document.getElementById(id)

//检查是否有id参数

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

//参数需要6个，起始位置和圆半径，结束位置和圆半径

context.fillStyle = "#eeeeef"

//绘制图形

context.fillRect(0,0,500,500)

//进行平移

context.translate(200,50)

context.fillStyle ="rgba(255,0,0,0.25)"

for(let i = 0;i<50;i++){

context.translate(25,25)

context.scale(0.95,0.95)

//为什么这里PI要除以10 ，呈现什么效果？

context.rotate(Math.PI/10)

context.fillRect(0,0,100,50)

}

//关闭路径

context.closePath()

//结束绘制

context.fill()

}

绘制径向渐变图形

function draw(id){

let canvas = document.getElementById(id)

//检查是否有id参数

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

//参数需要6个，起始位置和圆半径，结束位置和圆半径

let g1 = context.createRadialGradient(400,0,0,400,0,400)

g1.addColorStop(0.1,"rgb(255,255,0)")

g1.addColorStop(0.55,"rgb(255,0,255)")

g1.addColorStop(1,"rgb(0,255,255)")

//将渐变色填充给g1

context.fillStyle = g1

//绘制图形

context.fillRect(0,0,500,500)

//关闭路径

context.closePath()

//结束绘制

context.fill()

}

Title

function draw(id){

let canvas = document.getElementById(id)

//检查是否有id参数

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

let oprtns = new Array(

//图形按照绘制顺序重叠

"cource-atop",

"cource-in",

"cource-out",

"cource-over",

"destination-atop",

"destination-in",

"destination-out",

"destination-over",

//加色处理

"lighter",

"copy",

//重叠部分变透明

"xor"

);

i = 1

context.fillStyle = "blue"

//绘制图形

context.fillRect(10,10,60,60)

//以数组Array里面第八个方式来重叠图片

context.globalCompositeOperation = oprtns[i]

//再绘制一个圆形

context.beginPath()

context.fillStyle="red"

context.arc(60,60,30,Math.PI*2,false)

//关闭路径

context.closePath()

//结束绘制

context.fill()

}

[HTML5 Canvas 给图形绘制阴影]

Stars in the sky

Title

function draw(id){

//获取Html中的canvas

let canvas = document.getElementById("canvas")

let context = canvas.getContext("2d")

//定义样式

context.fillStyle = "rgb(0,104,139)"

//绘制一个矩形

context.fillRect(0,0,500,500)

//设置阴影与形状的水平距离(x轴方向上)

context.shadowOffsetX = 7

context.shadowOffsetY =7

//设置阴影颜色

context.shadowColor ="rgba(205,133,0,0.5)"

//设置阴影模糊程度

context.shadowBlur = 12

//将画布的x轴，y轴起始点(也就是整个坐标系)向浏览页面y轴方向移动50

context.translate(-10,20)

for(let i= 0;i<3;i++){

context.translate(80,100)

//调用绘制五角星的函数

creatr5Star(context)

//填充当前图像/路径，默认黑色

context.fill()

}

}

//绘制五角星

function creatr5Star(context){

let n= 0,dx=100,dy= 0,s=50

context.beginPath()

//设置五角星的颜色

context.fillStyle = "rgb(255,165,0)"

let x = Math.sin(0)

let y = Math.cos(0)

let dig = Math.PI/5*4

//绘制五角星的五条边

for (let i= 0;i<5;i++){

let x2 = Math.sin(i*dig)

let y2 = Math.cos(i*dig)

//绘制一条终点坐标为dx+x2*s,dy+y2*s的直线

context.lineTo(dx+x2*s,dy+y2*s)

}

//绘制一条从终点(坐标为dx+x2*s,dy+y2*s)到起点的直线

context.closePath()

//结束绘制

context.fill()

}

[HTML5 Canvas 使用图像]

Title

function draw(id){

let canvas = document.getElementById("canvas")

let context = canvas.getContext("2d")

context.fillStyle = "rgb(238,210,238)"

context.fillRect(0,0,500,500)

//实例化Image()

image = new Image()

image.src = "https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"

image.onload = function () {

drawImage(context,image)

}

}

//在画布上定位图像，并规定图像的宽度和高度

function drawImage(context,image){

context.drawImage(image,150,190)

}