当前位置:网站首页>Canvas foundation 1 - draw a straight line (easy to understand)
Canvas foundation 1 - draw a straight line (easy to understand)
2022-07-06 13:50:00 【Ling Xiaoding】
List of articles
This article begins with canvas, Easy to understand , Xiaobai has no trouble , According to MOOCS liuyubobobo The teacher's video lesson learning and sorting
Video lesson guide : For class network liuyubobobo teacher Gorgeous countdown effect Canvas Fundamentals of drawing and animation
List of articles
1、 Declaration label
- Width and height are on the label
<canvas id="canvas" width="1024" height="768" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;" >
The current browser does not support canvas, Please change your browser and try again
</canvas>
- Width and height in js Set in
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
The current browser does not support canvas, Please change your browser and try again
</canvas>
window.onload = function () {
// obtain
var canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 768
// Determine whether the browser can be used canvas
if (canvas.getContext('2d')) {
// Use 2d mapping
var context = canvas.getContext('2d')
// Use context draw
} else {
alert(' The current browser does not support canvas, Please change your browser and try again ')
}
}
2、 Draw a straight line
canvas First set the state and then draw
Draw a straight line js Code
context.moveTo(x, y) The starting point
context.lineTo(x, y) End
context.lineWidth = 5 Line width
context.strokeStyle = ‘#005588’ Line style
context.stroke() draw
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 768
if (canvas.getContext('2d')) {
var context = canvas.getContext('2d')
// Use context draw
// From coordinates (100,100) Start from
context.moveTo(100, 100)
// To coordinates (700,700) Draw a straight line for the end
context.lineTo(700, 700)
// The line width is 5
context.lineWidth = 5
// The style and color of the line
context.strokeStyle = '#005588'
// Execute the operation of drawing a straight line
context.stroke()
} else {
alert(' The current browser does not support canvas, Please change your browser and try again ')
}
}
effect
3、 A figure composed of lines - Draw a triangle
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 768
if (canvas.getContext('2d')) {
var context = canvas.getContext('2d')
// Use context draw
// From coordinates (100,100) Start from
context.moveTo(100, 100)
context.lineTo(700, 700)
context.lineTo(100, 700)
context.lineTo(100, 100)
// The line width is 5
context.lineWidth = 5
// The style and color of the line
context.strokeStyle = '#005588'
// Execute the operation of drawing a straight line
context.stroke()
} else {
alert(' The current browser does not support canvas, Please change your browser and try again ')
}
}
4、 Polygon fill and stroke
- context.fillStyle = ‘rgb(2,100,30)’ Fill color
- context.fill() fill
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 768
if (canvas.getContext('2d')) {
var context = canvas.getContext('2d')
// Use context draw
// From coordinates (100,100) Start from
context.moveTo(100, 100)
// To coordinates (700,700) Draw a straight line for the end
context.lineTo(700, 700)
context.lineTo(100, 700)
context.lineTo(100, 100)
// The line width is 5
context.lineWidth = 5
// The style and color of the line
context.strokeStyle = '#f00'
// Execute the operation of drawing a straight line
context.stroke()
// Polygon fill
context.fillStyle = 'rgb(2,100,30)'
context.fill()
} else {
alert(' The current browser does not support canvas, Please change your browser and try again ')
}
}
5、 Define two shapes
- context.beginPath() start
- context.closePath() end
- These two methods wrap the two paths and separate them from the other paths
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 768
if (canvas.getContext('2d')) {
var context = canvas.getContext('2d')
// Use context draw
// From coordinates (100,100) Start from
context.beginPath()
context.moveTo(100, 100)
// To coordinates (700,700) Draw a straight line for the end
context.lineTo(700, 700)
context.lineTo(100, 700)
context.lineTo(100, 100)
context.closePath()
// The line width is 5
context.lineWidth = 5
// The style and color of the line
context.strokeStyle = '#f00'
// Execute the operation of drawing a straight line
context.stroke()
// // Polygon fill
// context.fillStyle = 'rgb(2,100,30)'
// context.fill()
context.beginPath()
context.moveTo(200, 100)
context.lineTo(700, 600)
context.closePath()
context.strokeStyle = '#000'
context.stroke()
} else {
alert(' The current browser does not support canvas, Please change your browser and try again ')
}
}
6、 Neves demo Example
- html part
<canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">
The current browser does not support canvas, Please change your browser and try again
</canvas>
- Self made data
var tangram = [
{
p: [{
x: 0,y: 0},{
x: 800,y: 0},{
x: 400,y: 400},],
color: '#caff67'
}, {
p: [{
x: 0,y: 0},{
x: 400,y: 400},{
x: 0,y: 800},],
color: '#67becf'
}, {
p: [{
x: 0,y: 800},{
x: 400,y: 400},{
x: 400,y: 800},],
color: '#f50'
}, {
p: [{
x: 400,y: 800}, {
x: 800,y: 800}, {
x: 400,y: 400}, ],
color: '#0f5'
}, {
p: [{
x: 400,y: 400}, {
x: 800,y: 0}, {
x: 600,y: 600}, ],
color: '#25f'
}, {
p: [{
x: 800,y: 0}, {
x: 600,y: 600}, {
x: 800,y: 800}, ],
color: '#f33'
},
]
- js part
let canvas = document.getElementById('canvas')
if (canvas.getContext('2d')) {
var context = canvas.getContext('2d')
tangram.forEach((item, index) => {
draw(item, context)
})
}
function draw(piece, cxt) {
cxt.beginPath()
cxt.moveTo(piece.p[0].x, piece.p[0].y)
piece.p.forEach((item, index) => {
cxt.lineTo(item.x, item.y)
})
cxt.closePath()
cxt.fillStyle = piece.color
cxt.fill()
cxt.lineWidth = 2
cxt.strokeStyle = '#000'
cxt.stroke()
}
7、 Draw a square demo
<canvas id="canvas" width="1024" height="768" style="display: block; background-color: #eee;margin: 10px auto;">
Out of commission
canvas
</canvas>
<script> var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') drawRect(context, 100, 100, 400, 400, 10, '#600', '#008833') function drawRect(cxt, x, y, width, height, borderWidth, borderColor, borderFill) {
cxt.beginPath() cxt.moveTo(x, y) cxt.lineTo(x + width, y) cxt.lineTo(x + width, y + height) cxt.lineTo(x + width, y + height) cxt.lineTo(x, y + height) cxt.closePath() cxt.lineWidth = borderWidth cxt.strokeStyle = borderColor cxt.fillStyle = borderFill cxt.fill() cxt.stroke() } </script>
summary
This article asks canvas Section 1 , After that, it will continue to update , If you feel it is still practical , It's OK to follow or like , Thank you very much!
边栏推荐
- 实验八 异常处理
- 7. Relationship between array, pointer and array
- [au cours de l'entrevue] - Comment expliquer le mécanisme de transmission fiable de TCP
- 4. Binary search
- Redis cache obsolescence strategy
- 9. Pointer (upper)
- [中国近代史] 第五章测验
- 3. Input and output functions (printf, scanf, getchar and putchar)
- About the parental delegation mechanism and the process of class loading
- Mortal immortal cultivation pointer-1
猜你喜欢
fianl、finally、finalize三者的区别
Safe driving skills on ice and snow roads
C language Getting Started Guide
实验六 继承和多态
[during the interview] - how can I explain the mechanism of TCP to achieve reliable transmission
It's never too late to start. The tramp transformation programmer has an annual salary of more than 700000 yuan
A comprehensive summary of MySQL transactions and implementation principles, and no longer have to worry about interviews
6. Function recursion
QT meta object qmetaobject indexofslot and other functions to obtain class methods attention
附加简化版示例数据库到SqlServer数据库实例中
随机推荐
仿牛客技术博客项目常见问题及解答(一)
4. Binary search
关于双亲委派机制和类加载的过程
4.分支语句和循环语句
【VMware异常问题】问题分析&解决办法
[面试时]——我如何讲清楚TCP实现可靠传输的机制
[hand tearing code] single case mode and producer / consumer mode
Wechat applet
7-3 构造散列表(PTA程序设计)
The difference between overloading and rewriting
简述xhr -xhr的基本使用
[中国近代史] 第六章测验
使用Spacedesk实现局域网内任意设备作为电脑拓展屏
Safe driving skills on ice and snow roads
Mode 1 two-way serial communication is adopted between machine a and machine B, and the specific requirements are as follows: (1) the K1 key of machine a can control the ledi of machine B to turn on a
Read only error handling
Mortal immortal cultivation pointer-2
Write a program to simulate the traffic lights in real life.
Principles, advantages and disadvantages of two persistence mechanisms RDB and AOF of redis
【九阳神功】2017复旦大学应用统计真题+解析